浮动嵌套div的高度填充问题

Question

浮动嵌套div的高度填充问题

3

我正在制作一个基本的评论系统。当评论很短时，它非常完美，但是当用户写很多时，评论不像应该的那样漂亮...我尝试使用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;   
}

谢谢！

- Ryan Casas

3个回答

0

CSS

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

HTML

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

这就是您想要的结果吗？它将文本保留在自己的 div 中，左侧的用户信息不受影响。

- Andres

是的，类似于那样，但用户信息必须延伸到评论底部... - Ryan Casas

据我所知，div无法做到这一点。根据我所见，您需要使用表格，在用户信息<td>上使用rowspan=100%。 - Andres

0

我认为你想要的是这样的。

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

<div id="actual_comment">

然后在你的 .css 文件中：

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

这段代码的作用是将#actual_comment浮动到f-left旁边，然后在它被浮动之后指定div的宽度。

之后你已经清除了所有div下面的浮动元素，并在闭合div标签之前进行了清除操作。

点击查看这个JSFiddle。

- Anil

那就像另一个解决方案一样。谢谢，但它仍然无法延伸到评论的底部。我想让这两个div处于相同的高度，但其中一个是可变的。 - Ryan Casas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Variant · Accepted Answer

如果您想让左浮动面板完全延伸，可以通过填充和边距使用一个不错的技巧：请参见此处：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; 
}