1 
<div style="width: 800px; height: 600px"> 
    <div style="height: 100px"> 
        top fixed-height row
    </div> 
    <div style="???"> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div>

上の方が固定サイズで、下の方が伸びてその親divに収まる、JavaScriptなしで2行のレイアウトを作成する標準的な方法は何ですか？

  • 両方の行のスタイルが独立していることを望みます。ここでいくつかの解決策を見つけましたが、上の行の高さを変更する場合は、下の行のスタイル（マージンなど）も一緒に変更する必要があります。

  • 古いブラウザをサポートする必要はありません。それが標準なら、それは大丈夫です。

ありがとう！

4

4 に答える 4

1

この場合、プリプロセッサ（LESSなど）を使用できます。

@contHeight: 600px;
@topHeight: 100px;

div#containingdiv { 
    width: 800px; 
    height: @contHeight; 
    }
div#toprow { 
    width: 100%;
    height: @topHeight; 
    }
div#bottomrow {
    height: @contHeight - @topHeight; 
    }
于 2012-05-14T05:38:43.323 に答える
1

displayCSSのプロパティを使用してこれを修正できます。

実例_

HTML

<div id="a" style="width: 300px; height: 200px"> 
    <div id="b" style="height: 55%"> 
        top fixed-height row
    </div> 
    <div id="c" style=""> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div> ​

CSS

#a
{
    border: 1px solid black;
    display:table;
}
#b
{
    background-color:red;
    display:table-row;
}
#c
{
    background-color:green;
    display:table-row;
}​
于 2012-05-14T05:38:46.643 に答える
0

HTMLとCSSは静的言語であり、計算を実行できる動的言語ではありません。各「行」divのスタイル間には実際には依存関係がないため、各divに個別にスタイルを適用することしかできず、一方の高さを他方に基づいて決定できます。

ただし、達成しようとしていることによっては、下部のdivの代わりに含まれているdivのスタイルを設定できる場合があります。

たとえば、上の行の背景が赤で下の行の背景が黄色である非常に単純な例では、含むdivのスタイルを下のdivに必要な外観に設定すると、上のdivがこの外観をカバーします。コンテナの上部：

div#containingdiv { width: 800px; height: 600px; background:#ffff00; }
div#toprow { height: 100px; background:#ff0000; width 100%; }
div#bottomrow { }
于 2012-05-14T05:13:11.517 に答える
0

HTML CSSレイアウトに関するブログを書いたばかりです。デモでは、JavaScriptを介してほとんどのcss設定を操作できます。

http://attemptingawesomeness.blogspot.com.au/2012/05/css-html-layout-guide_13.html

http://attemptingawesomeness.blogspot.com.au/2012/05/ultimate-html-css-layout-demo.html

于 2012-05-14T07:01:37.443 に答える