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 に答える