浮动嵌套div的填充高度

Question

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

到目前为止我已经尝试过： http://jsfiddle.net/anWVC/3/

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

谢谢！

Answer 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 设置为隐藏：

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

Answer 2

css

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

html

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

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

Answer 3

我想这就是你的追求。

将 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 之前的浮动。

看看这个 JSFiddle。