CSS: выравнивание div по основанию родительского div

Question

http://jsfiddle.net/nFrp7/4/

У меня есть макет, похожий на этот jsfiddle, который я создал. Я хочу знать, как заставить синий div расположиться внизу (где красный div расширяется), несмотря ни на что (но не используя position: fixed; или bottom: 0;).

Как я могу это сделать?

Answer 1

Отметьте это http://jsfiddle.net/nFrp7/10/

использует div для переноса, чтобы содержать все div макета, и использует абсолютное позиционирование для синего div

Answer 2

Попробуйте,

.right-main {
      width: 100px;
      **height: 400px;**
      background-color: green;
    **position: relative;**
    } 

.bottom-right {
      background-color: blue;
      **position:absolute;**
      **bottom: 0;**
    }

Answer 3

хмм ....

.right-main {
width: 100px;
height: 30px;
clear: both;
background-color: green;
}

Очистить левый div?

Поскольку ВСЕ - это поплавок, я не думаю, что это возможно без некоторого позиционирования.

Ну, есть это ... ОБНОВЛЕНИЕ FIDDLE

Но он использует позиционирование.

Answer 4

Ах ... вы имеете в виду проблему CSS 100% высоты . Проверьте это тоже: 100% минимальная высота CSS макет .

Answer 5

Поместите обертку div вокруг всего и примените height:400px; и position:relative; к нему. Затем используйте position:absolute;, bottom:0; и right:0; на синем div.