0

これはかなり一般的な問題であり、私はまだ洗練された解決策を見つけていません:

div にいくつかのブロック要素 (4 としましょう) があります。非常にシンプルな縦型レイアウト。

最初の 2 つの要素の高さは固定されています。残りの 2 つの要素は、残りのスペースを分割する必要があります (つまり、body-height - first-element-height - second-element-height)。

サイズを計算できることはわかっていますが、これを達成するためのエレガントな方法はありますか?

ネイティブ ブラウザー機能 (最新の Firefox/Chrome バージョンでのみ実行される内部アプリであるため、ブリーディング エッジは問題ありません) または jQuery/jQuery UI (既に使用しています) のいずれかを使用するソリューションが必要です。

4

3 に答える 3

1

高さの計算にはjQueryを使用できます。

次があるとします。

<div id="parent" style="height:300px; background-color: red;">
    <div id="first" style="height:100px; background-color: blue;">
    </div>
    <div id="second" style="height:100px;  background-color: #c6c6c6;">
    </div>

    <div id="third" style="background-color: #75ac19;" ></div>
    <div id="fourth" style="background-color: black;"></div>
</div>

<script type="text/javascript">
  var parrentHeight= $("#parent").height();
  var firstBlock = $("#first").height();
  var secondBlock = $("#second").height();
  var remainingHeight = parrentHeight - (firstBlock + secondBlock);
  $("#third, #fourth").height(remainingHeight / 2);
</script>
于 2012-04-05T07:10:55.140 に答える
0

CSS3 フレックスボックス レイアウトを使用: http://www.html5rocks.com/en/tutorials/flexbox/quick/

于 2012-04-05T05:52:00.113 に答える
0

高さと幅の xx(px) ではなく、パーカンテージ値 xx(%) で遊んでください。

于 2012-04-05T05:52:09.747 に答える