将 2 个 div 扩展到页面底部答案

【问题标题】：Extend 2 divs to bottom of page将 2 个 div 扩展到页面底部
【发布时间】：2013-07-05 23:46:34
【问题描述】：

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

【问题讨论】：

标签： css html extend

【解决方案1】：

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

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

编辑

解决页脚问题

将您在#footer 的位置更改为

position: fixed;

而不是

position: relative;

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

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

【讨论】：

非常感谢！ Argh 不敢相信事情就这么简单。不过，它确实稍微弄乱了我的页脚，知道如何让它再次粘在底部吗？
@user2561163 我编辑了我的答案，试图修复你的页脚。 :)
我不想让页脚始终可见，就像一个菜单，在固定的位置......但无论如何，我现在有一个问题，即内容 div 并不总是足够大以扩展文本并创建一个滚动条。如果我设置溢出：隐藏；那么内容并不总是在某个点之后可见。
你不想要滚动条？
没有滚动条，我希望内容能像这个网站一样扩展整个页面。