0

さて、次のようにラッパー内に 3 つの div が設定されたページがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>

<div id="wrapper" style="width:608px;">

<div id="leftcolumn" style="float: left; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

<div id="rightcolumn" style="float: right; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

<div id="lefboottomtcolumn" style="clear: left; float: left; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

</div>

</body>

現在、3 つの div はすべて、さまざまなコンテンツで自由に拡張できますが、右の列のコンテンツが非常に最小限であり、したがって左の 2 つの列を組み合わせたものよりも小さい場合、右の列の高さまたは最小値高さ (より適切な方) は、他の列に合わせて調整できますが、コンテンツが要求するたびに、そのポイントを超えて拡張する機能を保持します。また、右側の列が最も高い場合、他の列はそれに順応せず、常に同じままであることに注意してください。

JavaScriptを使用して右側の列の最小の高さを動的に変更するのがおそらく良い方法ですが、そのようなコーディングの経験はありません。列を均等にするためのスクリプトをたくさん見てきましたが、明らかにここで探している結果ではありません。これらのスクリプトをニーズに合わせて調整しようとしましたが、うまくいきませんでした...両方の左側の列の合計の高さを取得する方法がわかりません(間に10pxのマージンもあります)。

4

1 に答える 1