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

【问题标题】：Div columns not extending to bottom of content when floated left and right左右浮动时，Div列不延伸到内容的底部
【发布时间】：2013-12-23 05:08:23
【问题描述】：

我有两个 div/列。一个向左浮动，另一个向右浮动（对于我正在制作的响应式设计页面，它必须是这种方式）。左侧 div 的内容远远低于 viewport/left div，而右侧内容更短并且很好地保持在 viewport/right div 内。

我需要背景颜色一直扩展到左侧 div 内容的底部（或右侧 div 的内容，如果它是较长的内容）。

相反，它在视口底部切割背景颜色/div。我尝试过 clears:both、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>

【问题讨论】：

标签： css height overflow clearfix

【解决方案1】：

#content { height:100%; } 不起作用，因为这个高度是指父元素的高度，而不是由#content 的内容“产生”的高度......这意味着#content 只能达到<body> 的高度，这又不是页面的整个高度，而是“显示区域”的高度。

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

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

【讨论】：

嗨，我按照您的建议尝试了，但它只是将左侧一直向下扩展。如何让右侧的颜色也一直下降？这是您建议的更新小提琴：jsfiddle.net/SGzC3
我插入高度：0；并明确：两者； div在错误的地方不知何故？我到处都试过了？
对不起，我想我没有仔细阅读你的问题。我以为你想拉伸周围的<div>。拉伸蓝色的会很困难，这是肯定的，因为父 div 没有定义任何高度。如果您为 #content... 定义高度，您会看到蓝色的单条，但这不是我们想要的。我正在测试一些东西，但我得早起（我在欧洲）......所以我明天可能会回复一些或多或少有用的东西。很抱歉造成混乱。
这很奇怪，但它有效：jsfiddle.net/4C89C/5 在蓝色<div> 和相同的边距上添加了一个填充，但为负数，以及溢出：隐藏到#content。另见here。
我不确定负边距是否真的有必要......有不同意见的人吗？