我已经为此苦苦挣扎了几个小时，并且已经尝试了我能想到/找到的一切来让它工作。我希望我网站的内容和侧边栏 div 向下延伸到粘性页脚。
相关CSS:
body, html {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
min-height: 100%;
height: 100%;
line-height: 1;
}
body {
min-height: 100%;
height: 100%;
font-family: 'Century Gothic', sans-serif;
font-size: 13px;
line-height: 21px;
background: #e0d6b6 url(images/bg.png) repeat-x;
color: #2f2f2f;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
.container {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
background: transparent;
margin: 0 auto -30px;
padding: 0px;
}
.contentwrapper {
position: relative;
display: block;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 5%;
}
#content,
#sidebar {
position: relative;
padding: 20px;
background: #ffffff;
min-height: 100% !important;
height: 100% !important;
display: block;
position: relative;
overflow: auto;
}
#content {
min-width: auto;
width: auto;
margin: 0 0 auto 0;
}
#sidebar {
margin: 0 0 auto 2% !important;
width: 150px;
float: right;
}
.footer, .push {
clear: both;
height: 30px;
}
#footer {
display: block;
bottom: 0px;
position: relative;
width: 100%;
margin: 0px;
padding: 10px 0;
font-size: 12px;
border: none;
background: #808080;
color: #c4c4c4;
vertical-align: middle;
}
相关html:
<html>
<head>
</head>
<body>
<div class="container">
<div class="contentwrapper">
<div id="sidebar">sidebar</div>
<div id="content">
content
</div><!--content-->
</div><!--contentwrapper-->
<div id="push"></div>
<div id="footer">
footer
</div> <!--footer-->
</div><!--container-->
</body>
</html>
网址是http://hoskyns50.co.uk如果您想查看原始代码。我正在调整现有的 Wordpress 布局以适应。提前致谢。
最佳答案
删除 height: auto !important; 在你的 .contentwrapper
因为你想要的是height: 100%;。您的 height: auto !important; 正在覆盖您的 height: 100%;。
编辑
解决页脚问题
将您在 #footer 上的位置更改为
position: fixed;
代替
position: relative;
但我不确定这是否是您想要的，因为页脚不会跟随您的滚动。
fiddle :http://jsfiddle.net/xHJA4/
关于css - 将 2 个 div 扩展到页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17530115/