如何让div伸展到一个固定的页脚

Question

我希望我的设计的两个部分(见附图)扩展页面的整个高度.我试图创建一个小提琴,但它不会在那里工作,所以我在这里建立一个链接来演示我的意思.

我已经设定height的div保存的结果100%.但是,它不会向下延伸到固定页脚.

#found-results { 
    height: 100%px;
    margin-bottom: 50px;
    background: #CCC;
}

我还希望绿色框能够向下延伸到页脚.CSS是:

.main {
    width: 606px;
    float: left;
    padding: 15px 0 0 16px;
    position: absolute;
    background: green;
    margin-left: 383px;
}

现在,如果我添加height: 100%;它,它似乎工作,但如果其中一个选项卡包含大量文本,它不会伸展得足够远.

任何帮助都感激不尽.

Answer 1

等高柱

在某种程度上,棘手的部分不是固定的页眉和页脚,或100%的高度; 棘手的部分是等高柱.通常,最好伪造等高柱(例如,将灰绿色背景图像添加到父容器中).与真正的等高度列相比,这样做通常允许代码更简单,更灵活,更稳定.如果这个网站的布局证明过于笨重,请尝试伪装等高的列(如本演示所示),看看是否有助于布局变得更易于管理.

话虽如此,真正的等高柱的基本选项如下:

• HTML表格
• CSS表格
• CSS3 flexbox
• CSS3网格
• JavaScript或jQuery

这是一个使用CSS表格的真正等高列的JSFiddle演示.左栏的内容非常高,右栏的内容很短.该演示在IE10,Firefox,Chrome,Safari和Opera中测试良好; 但是,这可能仅适用于相对简单的布局.

这是一个使用HTML表的类似演示,以防需要支持IE8.

伪造等高柱

这是另一个通过添加双色背景图像来伪造等高列的演示.这个演示也在IE10,Firefox,Chrome,Safari和Opera中测试得很好; 但是,与以前的不同,它更有可能支持复杂的页面布局.

HTML

<div id="header">...</div>
<div id="content" class="clearfix">
    <div class="column1">...</div>
    <div class="column2">...</div>
</div>
<div id="footer">...</div>

CSS

html, body {
    height: 100%;
    ...
}
#header {
    position: fixed;
    top: 0;
    height: 120px;
    ...
}
#footer {
    position: fixed;
    bottom: 0;
    height: 60px;
    ...
}
#content {
    min-height: 100%;
    padding: 120px 0 60px 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    background: url(some-two-color-background.png) repeat-y 53.6% top;
    ...
}
#content .column1 {
    float: left;
    width: 250px;
}
#content .column2 {
    float: left;
    width: 350px;
}

注意:通过设置background-position属性来控制背景图像的表观列宽.这允许使用相同的通用背景图像伪造任意显式宽度(px或%)的两列.或者,可以使用具有精确列大小的自定义背景图像来简化CSS.

Answer 2

我想你是在追求这样的事情？ jsFiddle

我已为自己更轻松一点只复制我从你的网站,所需要的标记class的,id的和所使用的元素是完全一样在你的网站,应该使它很容易为你实现这个您网站上的解决方案.

此布局将始终至少填满整个屏幕,并且两个部分将具有相同的高度并触摸固定页脚.如果其中一个部分的内容为高,则会出现一个滚动条,您可以向下滚动直到到达两个部分的底部.两个部分的高度始终相同.我在标题中添加了一些按钮,用于添加和删除列内的内容,这样可以很容易地看到当内容高于文档高度时会发生什么.

编辑

我意识到你可能也想要修复你的标题(这在你当前的网站上似乎是这种情况),这里是一个带有固定标题的版本.jsFiddle.

EDIT2

我已经在小提琴中添加了一些按钮,以便更容易看到当列内的内容强制列高于文档高度时会发生什么.

HTML

<header></header>
<div id="container">
    <section class="results"></section>
    <section class="main"></section>
</div>
<footer></footer>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
header {
    position: fixed;
    top: 0px;
    height: 60px;
    width: 100%;
    background-color: #FFF;
}
#container {
    height: 100%;
    overflow:auto;
    padding-top: 60px;
    padding-bottom: 60px;
    display: table;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
footer {
    position: fixed;
    bottom: 0px;
    height: 60px;
    background-color: #333333;
    width: 100%;
}
.main {
    display: table-cell;
    background-color: #008000;
}
.results {
    display: table-cell;
    background-color: #EFEFEF;
    width: 383px;
}
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

Answer 3

我认为你的问题出在这里：#found-results { height: 100%px; ...

...而且我认为你也必须添加这个：

html, body {height: 100%}