Question

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

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

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

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

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

<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>

Answer 1

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

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

应该做的伎俩，不要打扰你或任何人：）

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

1 个答案: