0

CSS の高さの解決策を探している他の多くの人と同じように、私はこの問題を何年にもわたって繰り返してきました。シンプルな jsfiddle は千の言葉に値します:

http://jsfiddle.net/7dcjn/1/

html と body で height: 100% を使用して、やりたいことを部分的に達成する方法を理解しています。また、CSS3 の box-sizing プロパティについても知りました。これにより、いくつかの問題が修正されます。

ただし、高さ 50 ピクセルの上部ヘッダー div1 があり、その下に高さ 100% の div2 がある場合、ブラウザーは div2 をビューポートの高さの 100% にし、もちろん div2 を実行させるという問題がまだあります。体の外。上記の jsfiddle または以下のコードを参照してください。

<div id="MainBody">
    <div id="TopHeader">My Top Header</div>
    <div id="ContentWrapper">
    How does one get this blue box to extend only to the bottom of the viewport/browser window?  In other words, the blue border needs to extend right up to the green box.
    </div>
</div>

html, body {margin: 0; padding: 0; border: 2px solid #00CC00;}
html, body, #MainBody, #ContentWrapper {height: 100%; min-height: 100%; box-sizing:border-box; -moz-box-sizing:border-box;}
#MainBody {margin: 0; padding: 0; border: 2px solid #CC0000;}
#TopHeader {height: 50px; background-color: #303030; padding: 10px; color: #FFFFFF;}
#ContentWrapper {margin: 0; padding: 20px 20px 0 20px; margin: 10px 10px 0 10px; border: 2px solid #0000CC;}

助言がありますか？ありがとう！

4

2 に答える 2

1

ボックスを残りのスペースに実際に合わせるには、これが最も近いと思います。つまり、ボックスでスペース全体を埋め、その上にヘッダーを浮かせて、コンテンツが押し出されるようにします。

calc()これが機能するためにヘッダーのサイズを設定する必要がないため、これはより良い解決策です。

したがって、いくつかの変更を加えるTopHeader必要があり、底から押し出されないようにfloat:left;width:100%;マージンを変更する必要があります。ContentWrapper

私のJSfiddleを見てください

コンテンツの開始時にヘッダーの下のスペースを調整するには、下の余白を調整する必要があります。TopHeader

これが例です

于 2013-09-06T16:21:17.957 に答える