css自动占满余量,css – 自动高度父级的100％高度子div

根本不要浮动右列,只要给它足够大的余量以容纳左列.浮动元素将从正常文档流中删除,并且不会对其父级的高度做出任何贡献;所以,如果你浮动左右两列,你的红色#box元素最终没有高度,你看不到它;如果你停止浮动右列,那么它确实会确定#box的高度.如果你根本不浮动#right_column那么它将扩展为使用#box中的所有可用宽度.

像这样的东西：

details stuff yada yada yada

other stuff yada yada yada test test test test test stuff stuff content content content content content stuff stuff example stuff test stuff content content stuff content example

CSS：

#container {

width: 400px;

}

#box {

background-color: red;

}

#left_column {

width: 200px;

background-color: blue;

float: left;

}

#right_column{

margin: 0 0 0 200px;

background-color: green;

}

更新小提琴：http://jsfiddle.net/ambiguous/eDTdQ/

或者,您可以将宽度：200px添加到#right_column并让它保持浮动,然后将overflow：hidden添加到#box,以便#box扩展为包含其浮动的子项：

#box {

background-color: red;

overflow: hidden;

}

#right_column{

background-color: green;

float: left;

width: 200px;

}

这种方法的实时版本：http://jsfiddle.net/ambiguous/eDTdQ/2/

如果您希望右列自动拉伸并且您希望两列都是全高,那么您可以绝对定位左列而不是浮动它：

#box {

background-color: red;

position: relative;

}

#left_column {

width: 200px;

background-color: blue;

position: absolute;

top: 0;

left: 0;

bottom: 0;

}

直播：http://jsfiddle.net/ambiguous/3Cxe3/