0

使用这个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/

4

2 回答 2

2

这不是一件容易的事。我最近在这个布局上苦苦挣扎，发现下一个方法可行。将巨大的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/

于 2013-03-21T19:49:48.220 回答
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%;

于 2013-03-21T19:52:01.170 回答