Fill height of a floating nested div

问题

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.

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

Thanks!

回答1:

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/

The trick looks something like:

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

回答2:

css

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

html

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

is that the result you are looking for? it keeps the text inside it's own div and the left side user info untouched..

回答3:

I think its something like this your after.

Add a id or class to the <div> with the actual comment text inside (lorem ipsum text).

<div id="actual_comment">

Then in your .css:

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

What this does is float your #actual_comment up next to your f-left, then specify the width for the div once it is floated.

Then you already clear your floats below all the divs and before the closing div.

Check out this JSFiddle.

来源：https://stackoverflow.com/questions/8460661/fill-height-of-a-floating-nested-div

标签

css

html

css-float