[解決済み] 残りの幅を埋めるためにdivを展開する

質問

2列のdivレイアウトを作りたいのですが、それぞれのdivの幅を変えることができます。

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

ツリー」div が必要なスペースを満たした後、「ビュー」div が利用可能な全幅に拡大するようにしたい。

現在、私の「view」divは、それが含むコンテンツにリサイズされています。 また、両方のdivが全体の高さを占めるとよいでしょう。

免責事項が重複していない。

• float:leftが設定されている場合、divを最大幅に拡張する。 なぜなら、そこでは左の幅が固定されているからです。
• div のヘルプ - 残りの幅に合うように div を作成します。 2列で左寄せにしたいから。

どのように解決するのですか？

この解決方法は、実はとても簡単なのですが、ではありません。 すべて は明白です。 ブロックフォーマットコンテキスト(BFC)と呼ばれるものを起動する必要があり、これは特定の方法でフロートと相互作用します。

2番目のdivからfloatを取り除き、次のようにします。 overflow:hidden 代わりに 可視以外のオーバーフロー値を設定すると、設定されたブロックはBFCになります。 BFCは子孫のfloatがそこから抜け出すことを許さず、兄弟や祖先のfloatがそこに入り込むことも許さない。 ここでの正味の効果は、float された div がその役割を果たし、2 番目の div が通常のブロックになり、利用可能なすべての幅を占有することです。 フロートが占有している部分を除く .

これは現在のすべてのブラウザで動作するはずですが、IE6と7ではhasLayoutを起動する必要があるかもしれません。 思い出せません。

デモを見る

• 左を固定。 http://jsfiddle.net/A8zLY/5/
• 右を固定。 http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>