0

ページの高さ 100% のラッパー div があり、ラッパー内に動的な数の div があります。ラッパー div の最後の div で残りのスペースを埋めたい。

  html {
    height: 100%;
}
body {
    height: 100%;
}
#wrapper {
    height: 100%;
    width: 200px;
    border: solid 1px #FF0;
}
#wrapper .child {
    border: solid 1px #F00;
    height: 40px;
}
#wrapper .last {
    height: 100%;
    border: solid 1px #000;
}

例でわかるように: http://jsfiddle.net/CCDHT/最後の div の高さを 100% に設定すると、ラッパー div がオーバーフローします。

これは私が達成しようとしているものです: ここに画像の説明を入力

4

6 に答える 6

0

私は通常、単純な jQuery 関数を使用してページの初期化を実行し、この種の機能を取得します。

function set_div_height() {

    el_height = (
        ($(window).height()) - ($('.div1').height() + $('.div2').height())
    );
    $('.div3').height(el_height); 

}
于 2013-09-29T22:37:55.193 に答える
0

あなたは付け加えられます：

overflow:auto;

メインdivへ。

これはあなたが意味するものですか？

http://jsfiddle.net/CCDHT/2/

于 2013-09-29T22:30:44.223 に答える
0

http://jsfiddle.net/CCDHT/1/

設定

#wrapper {
    overflow:auto;
...

期待される出力を達成します。

于 2013-09-29T22:31:19.477 に答える
0

あなたが明確に説明したものは、のように見えます<table>。あなたはそれをエミュレートしようとするかもしれません:

  1. display: table;に追加#wrapper
  2. display: table-row;に追加#wrapper div

http://jsfiddle.net/WCx4P/1/

このソリューションの短所は次のとおりです。

  • 最後の div にはコンテンツが必要です
  • #wrapper divすべての境界線を直接使用することはできません

それは厄介な解決策ですが、今私が考えることができる唯一の解決策です。

達成しようとしている正確な設計を見て、問題のより良い回避策を見つけたいと思います。

于 2013-09-29T22:49:59.230 に答える
0

inline-blockwithとして設定し、overflow:scroll;を削除しheightます。

#wrapper{

    display:inline-block;
    overflow:scroll;

}

inline-block必要なすべてのスペースを占有します (可能な限り)。

于 2013-09-29T22:32:05.227 に答える