浮动嵌套div的填充高度答案

【问题标题】：Fill height of a floating nested div浮动嵌套div的填充高度
【发布时间】：2016-02-04 18:37:20
【问题描述】：

我正在制作一个基本的评论系统。当评论很短时它是完美的，但是当用户写很多时，评论并不像它应该的那样花哨......我试图用 height: 100%; 填充空间但是它不像我预期的那样工作。我希望作者信息填写评论的高度。

HTML：

<div class='comment'>
    <div class="f-left">
        <small style="font-size: .8em;">23:44 - 10/12/2011</small>
        <img src='http://comenzarjuego.com/wp-content/uploads/2010/02/pikchu.jpg' width='96' alt='Avatar' />

        Pikachu_Monster<br/>
        ------------<br />
        Age: 19<br />
        Comments: 67<br/>
    </div>

    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat mattis nibh eget viverra. Vivamus dolor erat, eleifend mollis fringilla nec, sodales in sapien. Praesent sit amet adipiscing augue. Fusce fermentum luctus euismod. Fusce ac elit enim. Maecenas tempor volutpat tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae lectus non sapien consectetur rhoncus. Sed mi mi, sagittis ullamcorper rutrum nec, imperdiet nec libero. Sed commodo orci eleifend mi sagittis et auctor massa convallis.

Nam vitae velit vitae ante eleifend dapibus. Quisque tincidunt risus quis magna sodales non scelerisque elit malesuada. Vivamus mattis diam sed ipsum gravida nec porta odio ullamcorper. Sed at velit eget libero mollis dapibus vitae at sapien. Sed adipiscing lacinia justo ullamcorper hendrerit. Phasellus tempor sodales libero, eget ultrices tortor sollicitudin condimentum. Curabitur id nisi metus. Quisque posuere sapien laoreet est consectetur pretium sed et erat. Etiam eget enim metus. Fusce rutrum blandit porta. Etiam posuere semper accumsan. Curabitur et justo massa. Sed tellus sem, congue a consectetur vitae, tempus quis leo. Ut lacinia gravida neque ac viverra. Cras placerat ante ut justo tempor condimentum. Donec interdum, felis a dapibus hendrerit, augue ante sodales leo, vitae molestie arcu neque a magna. 
    </div>
    <br style="clear: both;">
</div>

CSS：

.f-left{
    float: left;
    text-align:center;
    background: #ccc;
    width: 128px;
    margin-right: 16px;
    height: 100%;
}
.comment{
     background: #aaa;   
}

谢谢！

【问题讨论】：

标签： css html css-float

【解决方案1】：

如果您希望浮动的左侧面板一直伸展，您可以使用填充和边距做一个很好的技巧：请参阅此处：http://jsfiddle.net/anWVC/19/

这个技巧看起来像：

.f-left{
     float: left;
     text-align:center;
     background: #ccc;
    width: 128px;
    margin-right: 16px;
    height: 100%;
    padding-bottom:100%; 
    margin-bottom:-100%;
}

请注意，由于此技巧会将面板拉伸到容器之外，因此您需要将容器的 overflow 设置为 hidden：

.comment{
     background: #aaa;   
    overflow:hidden; 
}

【讨论】：

太好了！我不知道你能做到这一点！ +1
是的，它适用于所有 IE 版本（实际上从未在 IE6 上测试过 :)）
+1，为此搜索谷歌，我确信我发现的其他解决方案可能有效，但你的解决方案是第一个在我的场景中工作的解决方案。谢谢！
不错的解决方法。但是，如果您在 div 的外部有圆角或任何其他视觉效果，则会从底部剪掉。如果您需要将浮动的 div 换行到新行，它也会在响应式设计中中断...-100% 底部边距会产生难看的重叠。

【解决方案2】：

css

.f-right{float:left; width:350px;}

html

 <div class="f-right">
    Lorem ipsum dolor sit amet,

这是您正在寻找的结果吗？它将文本保留在它自己的 div 中，并且左侧的用户信息保持不变..

【讨论】：

是的，类似的，但用户信息必须延伸到评论的底部...
据我所知，div 做不到。从我所见，您将不得不使用表格，并在用户信息上执行 rowspan=100%

【解决方案3】：

我认为它是你之后的事情。

在<div> 中添加一个id 或类，其中包含实际的评论文本（lorem ipsum 文本）。

<div id="actual_comment">

然后在你的 .css 中：

#actual_comment{float:left; width: 70%} /*Must specify a width*/

这样做的目的是将您的 #actual_comment 浮动到您的 f-left 旁边，然后在浮动后指定 div 的宽度。

那么你已经清除了所有 div 下方和关闭 div 之前的浮动。

Check out this JSFiddle.

【讨论】：

这就像其他解决方案一样。谢谢，但它仍然没有延伸到评论的底部。我希望两个 div 高度相同，但其中一个是可变的。