2 列のレイアウトがあり、そのうちの 2 つは 100% の高さです。ここまでは順調ですね。
この問題は、ドロップダウン メニューの結果として左の列 (下の例) のコンテンツが展開されるときに発生します。
以下のマークアップを見てください。左のボックスに従って右のボックスが拡張されていないことを示すために、意図的に左のボックス内に別の div を設定しました。
<!doctype html>
<html style="min-height:100%;height:100%">
<head>
<title>test</title>
</head>
<body style="min-height:100%;margin:0;background-color:#ccc;height:100%">
<div style="width:30%;background-color:green;;float:left;min-height:100%"><div style="height:900px">Green</div></div>
<div style="width:60%;background-color:red;float:right;min-height:100%">Red</div>
</body>
</html>
適切なボックスを高さで拡張するための良い解決策は何ですか? 左のものはいつですか？