Высота заливки плавающего вложенного 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 контейнера hidden:

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

Answer 2

Я думаю, что-то вроде твоего после.

Добавьте идентификатор или класс к <div> с фактическим текстом комментария внутри (lorem ipsum text).

<div id="actual_comment">

Тогда в вашем .css:

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

То, что это делает, плавает ваш #actual_comment рядом с вашим f-left, затем укажите ширину для div, как только он будет перемещен.

Тогда вы уже очистите свои поплавки ниже всех div и перед закрывающим div.

Проверьте это JSFiddle.

Answer 3

css

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

html

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

- это результат, который вы ищете?он хранит текст внутри своего div и нетронутая информация о пользователе слева *.