1

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

4

1 回答 1

0

删除height: auto !important;你的.contentwrapper

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

编辑

解决页脚问题

将您的位置更改#footer为

position: fixed;

代替

position: relative;

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

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

于 2013-07-08T15:24:05.097 回答