Сделать поле заполнения оставшегося поля родителя

Мне нужна помощь с позиционированием div. Структура HTML выглядит следующим образом:

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

И у меня есть следующий CSS:

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

Ширина и высота левого div являются динамическими.

Чего я хочу достичь:

Сделайте высоту правого div равным высоте левого div.
Сделайте ширину правого div, чтобы заполнить остальную часть div классом item.
Абзац с классом bottom должен находиться в нижней части правого div.

Вот простой образ, который представляет мою цель:

И ссылка на JSFiddle demo.

Ответы

Ответ 1

Получение правильного положения и ширины .bottom представляется самым большим препятствием для кросс-браузерного решения CSS.

Функции

1. Поплавки

Как продемонстрировал @joeellis, гибкие ширины могут быть достигнуты путем плавания только левого столбца и применения overflow:hidden к правому столбцу.

Позиция .bottom не может быть достигнута в любом браузере. Там нет решения CSS для плавающих столбцов с равной, переменной высотой. Абсолютно расположенный элемент .bottom должен находиться внутри правого столбца div, так что ширина 100% даст ему правильный размер. Но так как правый столбец не обязательно должен быть таким же высоким, как левый столбец, позиционирование .bottom с bottom:0 не обязательно будет располагаться в нижней части контейнера.

2. HTML-таблицы и таблицы CSS

Гибкая ширина может быть достигнута путем предоставления левой ячейке ширины 1px и не указывать ширину для правой ячейки. Обе клетки будут расти в соответствии с содержанием. Любое дополнительное пространство будет добавлено только в правую ячейку.

Если .bottom находится внутри правой ячейки таблицы, положение не может быть достигнуто в Firefox. Относительное положение не действует в ячейке таблицы в Firefox; абсолютное положение и ширина 100% не будут относиться к правой ячейке таблицы.

Если .bottom рассматривается как отдельная ячейка таблицы в правом столбце, правильные высоты правой и нижней ячеек таблицы не могут быть достигнуты ни в одном браузере, кроме Firefox. Ячейки таблицы не являются гибкими по высоте так же, как и в ширину (кроме Firefox).

3. CSS3 flexbox и сетки CSS3

Flexbox, а сетки - перспективные инструменты компоновки ближайшего будущего. Но flexbox не поддерживается IE9 или ранее, и сетки не поддерживаются ни одним браузером, кроме IE10. Не проверял, может ли он достичь этого макета, но поддержка браузера может помешать им в настоящее время быть опцией.

Резюме

Поплавки не предлагают решение для любого браузера.
HTML-таблицы и таблицы CSS не предлагают кросс-браузерное решение.
Flexbox не предлагает потенциального решения для IE9 или ранее (и может или не может предложить решение для других браузеров).
Grids предлагают только потенциальное решение IE10 ( и может или не может предложить там решение).

Заключение

В настоящее время не существует адекватного решения CSS, которое будет работать в достаточно релевантных браузерах, за возможным исключением flexbox (если поддержка IE9 и ранее не требуется).

JQuery

Здесь несколько модифицированных демоверсий, которые используют jQuery, чтобы заставить столбцы иметь одинаковую высоту. CSS и jQuery для обеих демонстраций одинаковы. HTML только отличается тем, сколько контента находится в левом и правом столбцах. Обе демоверсии прошли проверку во всех браузерах. Такой же базовый подход можно использовать для простого JavaScript.

Чтобы все было просто, я переместил внутреннее дополнение для левого и правого div к дочернему элементу (.content).

Ответ 2

Элементы сиблинга одинаковой высоты и пребывания в одной строке могут быть достигнуты с помощью , отображая их как table-cell, а родительский - как display: table.
Рабочая скрипка: http://jsfiddle.net/SgubR/2/ (который также отображает overflow: hidden по методу плавающего элемента для создания столбца. Последнее требует clearfix)

Столбец в CSS использует любой HTML-элемент, который вы хотите (раздел, div, span, li, whatever), его семантика не связана с элементами таблицы, tr и td, используемыми для макета таблицы (за исключением того, что визуальный результат тот же, что мы хотим).

display: table устанавливается на родительский
display: table-row может использоваться на промежуточном элементе, но если он работает без него, прекратите
display: table-cell устанавливается для каждого дочернего элемента
ширина установлена на none, некоторые или все эти "ячейки". Браузер будет адаптироваться как к содержимому, так и к ширине, заданной для расчета их ширины (и общей ширины родителя, очевидно).
table-layout: fixed сообщит браузерам перейти на другой алгоритм компоновки таблиц, где они не заботятся о количестве контента, только ширины, заданные CSS
vertical-align: top потребуется в большинстве случаев (но вы можете установить другие значения, отлично подходящие для сложных макетов)
поля не применяются к "ячейкам", а только к дополнению. Поля применяются только к таблице. Хотя вы все еще можете отделить "ячейки" с помощью border-collapse: separate и/или border-spacing: 4px 6px

Совместимость: IE8 +
Возврат для IE6/7 при необходимости точно такой же, как для встроенного блока

Более длительные объяснения в предыдущих ответах: здесь и там, а также старый добрый метод faux-columns (ваш дизайн должен быть продуман с учетом этой техники)

Ответ 3

Просто добавьте oveflow в правый столбец и не плавайте его.

.right {
  position: relative;
  overflow: hidden;
}

Это сделает right, чтобы заполнить оставшуюся часть ширины.

Ответ 4

Что-то вроде этого может работать:

http://jsfiddle.net/PCvy9/2/

Основной ключ того, что вы ищете в строке:

 .right {
   overflow: hidden;
   background-color: #C82927;
 }

Это связано с тем, что называется "контекстом форматирования блока". Отличные рассуждения и советы о том, почему здесь: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

Однако их высоты не полностью связаны; в этом примере вам нужно будет вручную установить высоту вашего левого блока (в качестве плавающего контейнера)