我在尝试构建一个简单的 CSS 3 布局时感到头疼...
这是我现在拥有的 - http://jsfiddle.net/e1c79ak5/
这是 HTML
<body>
<div id="container">
Some stuff<br />
Some stuff<br />
Some stuff<br />
</div>
<footer class="footer">
Some text in footer
</footer>
</body>
和 CSS:
html {
position: relative;
min-height:100%;
}
body {
background-color: #808080;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
background-color: #f5f5f5;
border:1px red solid;
}
#container
{
width: 500px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
margin-top:0;
background-color:#FFFFFF;
border:1px red solid;
}
我不知道如何调整中间面板的高度，所以它总是触及下面的页脚......另外，当浏览器调整为较小的视口(viewport)时，页脚会移动到中间内容上:(我没有还没有找到解决方法...
有没有 CSS 解决方案？
最佳答案
您可以使用 Sticky Footer
这是您的代码片段:
html,body {
height: 100%;
}
body {
background-color: #808080;
}
footer {
background-color: yellow;
border: 1px green solid;
}
#container {
background-color: #FFFFFF;
border: 1px red solid;
min-height: 100%;
margin-bottom: -90px; /* equal to footer height */
}
#container:after {
content: "";
display: block;
}
footer,#container:after {
height: 90px;
}<body>
<div id="container">
Some stuff
<br />Some stuff
<br />Some stuff
<br />
</div>
<footer class="footer">
Some text in footer
</footer>
</body>关于html - 带有页脚和中间面板的 CSS 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27381187/