Question

使用此Fiddle，如何更改，以便红色边框增长到页脚的顶部。最终的结果是红色框占据了页面的中间部分。

HTML

<div class="wrapper">
    <div class="header">HEADER</div>
    <div class="body">BODY</div>
    <div class="push"></div>
</div>
<div class="footer">FOOTER</div>

CSS

.header { height: 60px; background-color: #999; }
.footer { height: 61px; background-color: #999; }
.body { border: 1px solid red; }

/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
* { margin: 0; }
html, body { height: 100%; }
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px auto; /* the bottom margin is the negative value of the footer's height */ }
.footer, .push { height: 60px; /* .push must be the same height as .footer */ clear: both; }
form { height: 100%; }
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */

回复更新 我在下面接受了@dfsq的答案，并从中获取灵感来创建最终解决方案http://jsfiddle.net/jeljeljel/A3vZV/6/

Answer 1

这不是一件容易的事。我最近在这个布局上苦苦挣扎，发现下一个方法有效。向您的padding容器应用巨大的margin和.body对面，同时将overflow: hidden提供给.wrapper，有很酷的伎俩：

.body {
    border: 1px solid red;
    padding: 0 0 1000px;
    margin-bottom: -1000px;
}
.wrapper {
    ...
    overflow: hidden;
}

http://jsfiddle.net/A3vZV/2/

Answer 2

看看这个......

.body { position : absolute; top : 60px; bottom : 60px; 
        width : 100%; 
        border: 1px solid green;
        overflow : hidden; }

干杯！

编辑＃1 ：正确剪辑添加overflow

修改＃2 ：稍微好一点left : 0px; right : 0px;而不是width : 100%;

使中间体盒长到页脚底部

2 个答案: