粘滞的页脚与网站长的容器

我非常抱歉，但我一直'有趣'与大量的随机粘性页脚解决方案2天，我慢慢开始思考自杀。好吧！所以我意识到这个解决方案：http://ryanfait.com/sticky-footer/但我不知道如何使它与包含页脚的另一个容器一起工作。粘滞的页脚与网站长的容器

* { 
 
    margin: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
#container { 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
} 
 
.content { 
 
    background-color: #C33C54; 
 
} 
 
.wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 auto -4em; 
 
} 
 
.footer, 
 
.push { 
 
    height: 4em; 
 
} 
 
.footer { 
 
    background-color: #254E70; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="layout.css" ... /> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div class="wrapper"> 
 
     <header>HEADER</header> 
 
     <div class="content"> 
 
     <p>Your website content here. 
 
      <p> 
 
     </div> 
 
     <div class="push"></div> 
 
    </div> 
 
    <div class="footer"> 
 
     <p>Copyright (c)</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

请帮助？这是我设计中唯一留下的东西，今天我必须完成。谢谢！

来源

2016-06-08 Ivan

http://codepen.io/anon/pen/xOwBBN – Ivan

你也需要给你的容器100％的高度。

html, 
body, 
#container { 
    height: 100%; 
}

来源

2016-06-08 14:55:00

粘滞的页脚与网站长的容器

回答

相关问题