展开div以获取剩余宽度 [英] Expand a div to take the remaining width

问题描述

我想要一个两列div布局，其中每一个都可以有可变宽度，例如

  div {float：left;}。second {background：#ccc;}  

 < div> Tree< / div>< div class =second>查看< / div>  

>

我想在'tree'div填充所需空间后，'view'div扩展到整个可用宽度。
目前我的'view'div调整为它包含的内容
如果两个div占据整个高度也将是好的

不重复免责声明：

当设置float：left时，将div扩展到最大宽度
，因为左边的宽度有固定的宽度。

帮助div-make div适合剩余宽度
因为我需要两个向左对齐的列

解决方案

解决方案其实很简单，但不是全部。你必须触发一个称为块格式化上下文（BFC）的东西，它以一种特定的方式与浮动块进行交互。

只需取第二个div，并给它 overflow：hidden 。任何溢出值，而不是visible使它设置的块成为一个BFC。 BFC不允许后代浮游物逃脱它们，也不允许兄弟/祖先浮游物侵入它们。这里的净效果是浮动的div将做它的东西，那么第二个div将是一个普通块，占据所有可用的宽度，除了被占用。

这应该在所有当前的浏览器中工作，虽然你可能需要在IE6和7中触发hasLayout。我不记得了。

strong>演示：

• 固定左： http://jsfiddle.net/A8zLY/5/


• 固定权利： http://jsfiddle.net/A8zLY/2/

I want a two-column div layout, where each one can have variable width e.g.

div {
    float: left;
}
.second {
    background: #ccc;
}

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

I want the 'view' div to expand to the whole width available after 'tree' div has filled needed space. Currently my 'view' div is resized to content it contains It will also be good if both divs take up whole height

Not duplicate disclaimer:

Expand div to max width when float:left is set because there the left one has a fixed width.

Help with div - make div fit the remaining width because I need two columns both aligned to left

解决方案

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do it's thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

• Fixed Left: http://jsfiddle.net/A8zLY/5/
• Fixed Right: http://jsfiddle.net/A8zLY/2/

这篇关于展开div以获取剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！