Как поместить элемент, оставшийся с полной высотой обертки?

HTML:

<div class="wrapper">
    <div class="left">
        Foo
    </div>
    <div class="right">
        Text row 1
    </div>
</div>

<div class="wrapper">
    <div class="left">
        Foo Bar
    </div>
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
</div>

CSS

.wrapper {
    overflow:hidden;
}

.left {
    width:80px;
    float:left;
    height:100%;
}

Как я могу дать плавающему div всю высоту обертки (высота которой меняется)?

возможно ли без jQuery?

Тест: http://jsfiddle.net/Q6B43/

ОТВЕТЫ

Ответ 1

Решение display: table

Внутри таблиц каждая ячейка строки имеет одинаковую высоту.

.wrapper {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}

Это лучшее решение, на мой взгляд, но несовместимо перед IE8.

Вот это Fiddle для этого решения.

Использование абсолютного позиционирования

Абсолютные позиционированные элементы уважают своих родственников height:

.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

Обычно я бы не предлагал абсолютное позиционирование в большинстве ситуаций. Но так как у вас есть фиксированный width, возможно, это не имеет значения. Но имейте в виду, что это будет игнорировать длинное содержимое в .left. Высота контролируется только .right.

Ниже приведено обновление вашей скрипты.

Решение flex i

Это настолько новое, что я бы не рекомендовал его использовать прямо сейчас, но просто для того, чтобы быть полным. Вы можете использовать CSS3 flex, но имейте в виду совместимость браузера:

.wrapper {
    display: flex;
}

Fiddle (протестирован в текущем Chrome и Firefox).

Макет grid

Еще более новый, чем flexbox, CSS grid швы, чтобы быть идеальным ответом на вопросы макета.

.wrapper {
    display: grid;
    grid-template-areas: 'left right';
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

Совместимость браузера встречается редко, если вы вернетесь в версии просмотра. К тому же, по моему мнению, это будет излишним для сценария OP, но для более сложных проблем с компоновкой в ​​будущем это очень мощная вещь.

Посмотрите на Fiddle.

Ответ 2

Добавить

body, html { height:100% }

И дайте вашей обертке фиксированную высоту в пикселях.