заставить плавающие элементы div касаться нижней части своего родителя

У меня есть общая проблема в конкретном случае ... Я пытаюсь автоматически увеличить высоту плавающих элементов div, чтобы заставить их касаться нижней части своего родителя.

Вот пример: http://jsfiddle.net/k95nK/1/ Моя цель состоит в том, что все плавающие столбцы имеют одинаковую высоту и касаются нижней части контейнера. (Поэтому все столбцы должны иметь высоту столбца с наибольшим содержанием) Высота родителя не может быть фиксированной. Содержимое должно увеличивать высоту родителя.

.content {
width : 150px;
background-color : #123456;
float : left;
margin-right : 10px
}

#allcontent {
background-color : #90c89a;
}

#allcontent:after {
content:"";
display: table;
clear: both;
}


<div id="allcontent">
    <div class="content">hello</div>
    <div class="content">hello</br>hello</div>
    <div class="content">hello</div>
</div>

Я знаю, что такое решение часто задают (Как заставить div изменить свою высоту, чтобы она соответствовала контейнеру?), но я не могу найти решение для своего конкретного случая.

Я пытался использовать абсолютное позиционирование, но, похоже, это делает их вне потока документов...


css absolute height
person Damien    schedule 22.07.2014    source источник
comment
Вы просите, чтобы высота ящиков расширялась к низу или чтобы ящики выравнивались по низу?   -  person Jay    schedule 22.07.2014
comment
Моя цель состоит в том, чтобы ящики расширялись к низу. И высота родителя должна быть высотой самых длинных ящиков, поэтому высота не фиксированная.   -  person Damien    schedule 22.07.2014

Ответы (3)


arrow_upward
2
arrow_downward

Удалите float:left и примените display:table-cell к своему разделу контента.

.content {
width : 150px;
background-color : #123456;
display:table-cell;
border-right:10px solid #90c89a;
}

ДЕМО

person Suresh Ponnukalai    schedule 22.07.2014
comment
Спасибо, Суреш, это прекрасно! - person Damien; 22.07.2014

arrow_upward
1
arrow_downward

Вам нужно указать высоту контейнера, а затем установить внутреннюю высоту div на 100%, например:

#allcontent {
    background-color: rgb(144, 200, 154);
    height: 320px;
}
.content {
    background-color: rgb(18, 52, 86);
    float: left;
    height: 100% !important;
    margin-right: 10px;
    vertical-align: top;
    width: 150px;
}

РЕДАКТИРОВАТЬ:

Без использования фиксированной высоты вам нужно будет использовать границу или отступы для интервала между div;

.content {
    background-color: rgb(18, 52, 86);
    display: table-cell; /* **** ADD THIS STYLE **** */
border-right: 20px solid rgb(144, 200, 154); /* **** Using border with same colour as background to give spacing effect **** */
    margin-right: 10px;
    width: 150px;
}
person Jay    schedule 22.07.2014
comment
Спасибо, но контейнер не может иметь фиксированную высоту. Моя цель состоит в том, чтобы содержимое увеличивало высоту контейнера. - person Damien; 22.07.2014
comment
Попробуйте мое обновление, оно работает, но вам нужно будет использовать границы или отступы, чтобы разнести элементы div. - person Jay; 22.07.2014
comment
Спасибо Джей! Он работает отлично, спасибо за вашу помощь. - person Damien; 22.07.2014
comment
Просто вопрос, потому что мой случай довольно сложный... Если контейнер больше (но не фиксирован), чем ячейки таблицы, как здесь: jsfiddle.net/k95nK/5 Есть ли решение? - person Damien; 22.07.2014
comment
Я смотрю на вашу скрипку, но у вас есть высота на контейнере? если бы вы убрали высоту, что еще там было бы? не должно быть причин, по которым фон больше, чем ячейки, если у вас нет высоты в контейнере - person Jay; 22.07.2014
comment
Также, пожалуйста, отметьте исходный ответ как ответ для будущих пользователей :) - person Jay; 22.07.2014
comment
Спасибо за ответ. Я обновил jsfiddle здесь: jsfiddle.net/k95nK/6 Как видите, в этом случай, 3 коробки не касаются дна. - person Damien; 22.07.2014
comment
Во-первых, у вас не должно быть ячейки таблицы внутри ячейки таблицы, вам нужен контейнер для отображения в виде таблицы, однако это само по себе не решает проблему. Могу я спросить, почему описания больше нет внутри allcontent? - person Jay; 22.07.2014
comment
Хорошо, мне удалось заставить его работать с новой настройкой html. Честно говоря, это много CSS, возможно, стоит задать новый вопрос - person Jay; 22.07.2014
comment
Спасибо, и я думаю, что вы правы, лучше поместить описание в allcontent. Огромное спасибо. - person Damien; 22.07.2014
comment
Он работает, не находясь внутри. просто много css, поэтому, я думаю, понадобится новый вопрос. p.s. пожалуйста, отметьте один из ответов на ответ для будущих зрителей, у которых есть эта проблема. - person Jay; 22.07.2014

arrow_upward
0
arrow_downward

Если вы используете floats, у вас есть только две возможности.

1) Определите фиксированную высоту для всех ваших элементов

.content {
    height: 288px
}

См. пример jsfiddle здесь: http://jsfiddle.net/k95nK/2/< /сильный>

2) Используйте таблицы

С таблицами решить тривиальную проблему, но в настоящее время это считается старой технологией.

person Valentin Mercier    schedule 22.07.2014