画面を完全に 2 つの div に分割する方法を探しています。左側に小さな固定サイズが 1 つ、右側に動的な幅の 1 つ。
これを行う方法はまだわかりませんでした。パーセンテージの幅は比例していないためです。
例: http://jsfiddle.net/acmnU/2/
結果フィールドまたは全体の幅のサイズを変更すると、緑色の div が画面に比例してサイズ変更されないことがわかります。フィールドが小さくなると、緑の div が赤の div の下に入ります。
私が必要としているのはある種のアンカーです。緑の div が大きくなりすぎずに画面全体に表示されるようにします。
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}