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

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/

Источник

2 ответа

Решение

display: table решение

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

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

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

Вот Скрипка для этого решения.

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

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

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

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

Вот обновление вашей скрипки.

flex идеальное решение

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

.wrapper {
    display: flex;
}

Скрипка (проверено в современных Chrome и Firefox).

grid расположение

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

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

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

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

Смотрите это в скрипке.

Источник

Добавлять:

body, html { height:100% }

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

Источник
Другие вопросы по тегам