100% Div Высота родителя? - PullRequest
Новая
       5

100% Div Высота родителя?

1 голос
/ 12 декабря 2011

Я радикально пытаюсь найти способ сделать div на 100% ростом своего родителя.Единственная хитрость в том, что рост родителей будет динамичным.

Есть идеи по этому поводу?Я не могу найти решение нигде?

Ответы [ 2 ]

2 голосов
/ 12 декабря 2011

Короткий ответ, это зависит.

Хороший простой способ сделать это (по крайней мере, на мой взгляд) использует конфликтующее абсолютное позиционирование: 

div {
    position: absolute;
    bottom: 0px;
    top: 0px;
    width: 150px;
}

Учетные записи для заполнения, и вы можетекод в полях.Недостатком является то, что он удаляет элемент из потока страницы, поэтому вам придется обойти это.Также поддерживается IE7 +.

Другой способ сделать это (также IE7 +) - использовать display: table; и display: table-cell;. 

#parent {
    display: table;
}
#parent div {
    display: table-cell; /* To make all children act as table-cells */
}
2 голосов
/ 12 декабря 2011

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

Вы можете использовать javascript / jquery, 

$(function () {
    var maxheight = Math.max.apply(null,$('.col').map(function () {
        return $(this).height();
    }));
    $('.col').height(maxheight);
});

js fiddle - использует box-sizing, чтобы я мог добавить некоторые отступы к столбцам, но это не является строго обязательным.

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

Таблицы или эмулированные таблицы (с использованием CSS) также будут работать.

Я думаю, , однако, в наши дни могут быть некоторые решения с использованием CSS3. Этот ответ с 2011 года, поэтому используйте свое суждение.

...