扩展一个div来填充剩余的宽度 [英] Expand a div to fill the remaining width
问题描述
我想要一个两列的div布局，其中每个布局都可以具有可变的宽度，例如
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>
我希望'view'div扩展到'tree'div填充所需空间后的整个宽度.
I want the 'view' div to expand to the whole width available after 'tree' div has filled needed space.
当前，我的视图" div已调整为包含的内容 如果两个div都占据整个高度，那也将很好.
Currently, my 'view' div is resized to content it contains It will also be good if both divs take up the whole height.
不可重复的免责声明:
- 设置了float:left时将div扩展到最大宽度 因为左边的宽度固定.
- 帮助div-使div适合剩余宽度 因为我需要两列都左对齐
- 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
推荐答案
此解决方案实际上非常简单，但在 all 上却并非如此.您必须触发一种称为块格式设置上下文"(BFC)的东西，它以特定的方式与浮点数交互.
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.
只取第二个div，删除浮点数，然后改为overflow:hidden即可.除可见之外的任何溢出值都会使它设置的块成为BFC. BFC不允许子代浮动对象逃脱它们，也不允许同级/祖先浮动对象入侵它们.最终的效果是，浮动div将执行其操作，然后第二个div将是一个普通块，占用所有可用宽度，除了由浮动占用的宽度.
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 its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.
这可能适用于所有当前浏览器，尽管您可能必须在IE6和7中触发hasLayout.
This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.
演示:
- Fixed Left: http://jsfiddle.net/A8zLY/5/
- Fixed Right: http://jsfiddle.net/A8zLY/2/
这篇关于扩展一个div来填充剩余的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
