当左右浮动时,Div列不会延伸到内容的底部

时间:2013-12-06 00:48:33

标签: css height overflow clear clearfix

我有两个div /列。一个漂浮在左边,另一个漂浮在右边(对于我正在制作的响应式设计页面,它需要这样)。左侧div的内容远远低于视口/左侧div,而右侧内容较短,并且在视口/右侧div内保持良好状态。

我需要将背景颜色一直扩展到左div内容的底部(如果是较长的内容,则需要正确div的内容)。

相反,它正在切割视口底部的背景颜色/ div。 我已经尝试过清除:两者,clearfix和溢出控件无济于事。我想我没有为这个设置正确实现它们。任何人都可以编辑我的小提琴,向我展示我需要做些什么才能让它们延伸到底部?

这是小提琴(您需要在小视口中向下滚动以查看它是如何切断颜色的):

http://jsfiddle.net/4C89C/

这是我在小提琴中使用的代码:

<html><head></head><body><style>

html, body {height:100%;}
#content {
    height:100%;
    border:thin solid red;
}
#innerdiv {
    height:100%;
    float:left;
    background-color: #eee;
    width: 60%;
}
#innerdiv2 {
    height:100%;
    float:right;
    background-color: blue;
    width: 40%;
}
#textdiv {
    height: 100%;
    padding-left: 40px;
}
#textdiv2 {
    height: 100%;
    padding-left: 40px;
    colo: white;
}  
</style>




<div id="content">
    <div id="innerdiv">
        <div id="textdiv">

Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />

                </div>
    </div>

<div id="innerdiv2">
        <div id="textdiv2">

Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />
            </div>
      </div>    
</div>

</body></html>

1 个答案:

答案 0 :(得分:2)

#content { height:100%; }不起作用,因为此高度指的是父元素的高度,而不是#content的内容“生成”的高度...这意味着#content只会变得高因为<body>,它不再是页面的整个高度,而是“显示区域”的高度。

不要为#content定义任何高度,在#innerdiv2之后为<div>height:0;插入另一个clear:both;

应该做的伎俩,不要打扰你或任何人:)