0

私は次の構造を持っています: 画像 http://images.devs-on.net/Image/4eludampmz3Ylfm6-Bereich.png

頭の高さはわかりませんが、残りの高さを 2 番目のコンテナーで埋めたいと思います。

頭のサイズを変更すると、いくつかの解決策が見つかりましたが、そうではありません。2 番目のコンテナーがウィンドウの残りの部分を埋めている間に、上部のコンテナーがその内容に適合するようにしたいと考えています。

これを解決するには？

4

6 に答える 6

1

純粋なCSSでこれを行うための優れたクロスブラウザーの方法は実際にはありません。最善の策は、jQuery / javascriptを使用して、画面全体に表示されるdivの高さを調整することです。トップdivの高さが200pxであると仮定します。

$("#bottom_div").css({
    minHeight: (($(window).height()) - 200) + 'px'
})

画面のサイズを変更するときにも、これを呼び出す必要があります。

于 2012-09-25T08:57:50.407 に答える
1

あなたはこれを行うことができます

position:absolute;
height:100% !important;
于 2012-09-25T08:57:03.047 に答える
1

JavaScript/jQuery を使用できます

var topDivHeight = $("#topdiv").height(),
totalHeight = $(document).height();
$('#bottomDiv').height(totalHeight  - topDivHeight );
于 2012-09-25T08:57:07.803 に答える
1

適応元:ブラウザ ウィンドウの高さに基づく動的な min-height を持つ div で、javascript に依存しません。

HTML:

<div id="header">
  Place your header information here.
</div>
<div id="content">
  Place your content here.
</div>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important /*min-height hack*/
  height: 100%;           /*min-height hack*/
  background-color: red;
}​

JSFiddle テスト: http://jsfiddle.net/7SP9U/

于 2012-09-25T09:02:31.513 に答える
1

これにはdisplay:tableプロパティを使用できますが、IE8以降まで機能します。次のように書きます。

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

CSS

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:10%;}

.content{background:blue}

これをチェックしてくださいhttp://jsfiddle.net/Rvbk4/2/

于 2012-09-25T09:05:31.777 に答える
0

を使用しているため、IE8でのみ機能するCSSのみのソリューションを次に示しますdisplay: table。

コンテナは完全な高さを取り、絶対に配置して取る必要がありますdisplay: table。その子が必要になりますdisplay: table-row（このレベルより下の適切なスタイリングが必要な場合は、コンテンツをさらにラッパーでラップする必要がありますがdisplay: table-cell、例を明確にするためにこれを省略しました）。

デフォルトでは、行は親と同じ分数の高さを占めますが、設定height: 0（または他の高さ）によって、行をコンテンツに合わせて縮小させることができます。

お役に立てれば：

http://jsfiddle.net/barney/nXWbL/

于 2012-09-25T09:58:13.233 に答える