☰

div を拡張して残りの幅を埋める 質問する

tag-icon • tag-icon html css multiple-columns
div を拡張して残りの幅を埋める 質問する

2列のdivレイアウトが欲しいのですが、それぞれの幅は可変です。

div {
  float: left;
}

.second {
  background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

「tree」div が必要なスペースを埋めた後、「view」div が利用可能な幅全体に拡張されるようにします。

現在、私の「ビュー」div は、含まれるコンテンツに合わせてサイズが変更されています。両方の div が全体の高さを占める場合も良いでしょう。

重複しない免責事項:

ベストアンサー1

この問題の解決法は実はとても簡単ですが、まったく明白ではありません。特定の方法でフロートと相互作用する「ブロック フォーマット コンテキスト」(BFC) と呼ばれるものをトリガーする必要があります。

2 番目の div から float を削除し、overflow:hidden代わりに float を指定します。visible 以外のオーバーフロー値があると、その値が設定されているブロックが BFC になります。BFC では、子孫の float が BFC を回避できず、兄弟/祖先の float が BFC に侵入することもできません。ここでの実際の効果は、float された div が処理を行い、2 番目の div が通常のブロックになり、float が占める幅を除くすべての使用可能な幅を占めるということです。

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

デモ:

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}
<div>Tree</div>
<div class="second">View</div>

おすすめ記事