Question

我已经在这个问题上苦苦挣扎了好几个小时，并尝试了我能想到的一切/找到让它发挥作用。我希望我的网站的内容和侧边栏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布局以适应。提前谢谢。

Answer 1

删除height: auto !important;

上的.contentwrapper

因为你想要的是height: 100%;。您的height: auto !important;覆盖了height: 100%;。

修改

修复页脚问题

将#footer上的位置更改为

position: fixed;

而不是

position: relative;

但我不确定这是否是你想要的，因为页脚不会跟随你的滚动。

小提琴：http://jsfiddle.net/xHJA4/

将2个div扩展到页面底部

1 个答案: