填充浮动嵌套div的高度 [英] Fill height of a floating nested div

问题描述

我在做一个基本的评论系统。这是完美的，当评论是短的，但当用户写了很多，评论不像想象的应该是...我试图填充 height：100％; 它不工作，因为我的预期。

I was making a basic commenting system. It's perfect when the comment is short, but when the user writes a lot, comment is not as fancy as it should be... I've tried to fill the space with height: 100%; but it doesn't work as I expected. I wanted the author info to fill in height to the comment.

到目前为止，我尝试过的是： http://jsfiddle.net/anWVC/3/

What I've tried so far: 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;   
}

谢谢！

推荐答案

如果你想让浮动的左侧面板一直伸展，有一个很好的技巧，你可以做paddings和边距：参见这里： http://jsfiddle.net/anWVC/19/

If you want the floated left panel to strech all the way there is a nice trick you can do with paddings and margins: see here: 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%;
}

请注意，由于这个技巧会将面板延伸到容器外，因此您需要设置容器溢出至隐藏：

Note that since this trick stretches the panel beyond the container you need to set the container's overflow to hidden:

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

这篇关于填充浮动嵌套div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！