CSS - Расширение плавающей дочерней высоты DIV до высоты родителя

452

У меня есть структура страницы как:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Теперь в child-leftDIV будет больше контента, поэтому parentвысота DIV увеличивается в соответствии с дочерним DIV.

Но проблема в том, что child-rightвысота не увеличивается. Как я могу сделать его высоту равной его родителю?

Веера
источник
2
Просто. Легко. Столбцы одинаковой высоты с Flexbox .
Майкл Бенджамин

Ответы:

459

Для parentэлемента добавьте следующие свойства:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

тогда для .child-rightэтих:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Более подробные результаты с примерами CSS здесь и больше информации о равных столбцах высоты здесь .

Sotiris
источник
14
Ваш CSS приводит к неопределенному поведению - высота родительского элемента зависит от высоты дочернего элемента, но процентная высота дочерних элементов определяется в терминах родительского элемента: это недопустимо и, скорее всего, не будет работать в кросс-браузерном режиме.
Имон Нербонн
1
Я вижу, вы не все плаваете - так что это определяется ценой не масштабирования, если правый столбец будет расти дольше, чем левый (что на самом деле не так в вопросе ОП).
Имон Нербонн
4
Да, вам нужно добавить это: padding-bottom: 32768px; нижнее поле: -32768 пикселей; детям.
Майкл
3
Это работает до тех пор, пока в правом столбце будет гарантированно меньше содержимого, чем в левом, иначе оно будет вырезано. Также я отредактировал ответ, чтобы опустить бесполезные объявления.
Кристоф
3
@MatthewBlackford: это «взлом» в том смысле, что он предотвращает разрушение маржи. Вы можете предотвратить разрушение полей другими способами, например, используя прозрачную границу размером 1 пиксель, но по сути, но здесь важно избегать коллапса полей. Я бы не использовал это решение, кроме как в крайнем случае, поскольку оно вызывает странные ошибки макета и неожиданное обрезание (или наложение контента), когда ваши предположения оказываются ошибочными. Короче говоря: вы не хотите делать это, если вам действительно не нужно.
Имон Нербонн
206

Обычное решение этой проблемы использует абсолютное позиционирование или обрезанные числа с плавающей запятой, но они хитры в том, что они требуют обширной настройки, если ваши столбцы меняются по числу + размеру, и что вам нужно убедиться, что ваш «основной» столбец всегда самый длинный. Вместо этого я бы предложил вам использовать одно из трех более надежных решений:

  1. display: flex: безусловно, самое простое и лучшее решение и очень гибкое, но не поддерживается IE9 и старше.
  2. tableили display: table: очень простой, очень совместимый (почти во всех браузерах), довольно гибкий.
  3. display: inline-block; width:50% с взломом отрицательного поля: довольно просто, но границы столбца-дна немного хитры.

1. display:flex

Это действительно просто, и его легко адаптировать к более сложным или более подробным макетам - но flexbox поддерживается только в IE10 или более поздней версии (в дополнение к другим современным браузерам).

Пример: http://output.jsbin.com/hetunujuma/1

Соответствующий HTML:

<div class="parent"><div>column 1</div><div>column 2</div></div>

Соответствующее CSS:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox поддерживает гораздо больше опций, но для простого количества столбцов достаточно вышеприведенного!

2. <table>илиdisplay: table

Простой и чрезвычайно совместимый способ сделать это - использовать table- я бы рекомендовал вам сначала попробовать, если вам нужна поддержка старого IE . Вы имеете дело со столбцами; divs + float просто не лучший способ сделать это (не говоря уже о том, что множественные уровни вложенных div для простоты взлома ограничений css едва ли более «семантические», чем просто использование простой таблицы). Если вы не хотите использовать tableэлемент, рассмотрите cssdisplay: table (не поддерживается IE7 и более ранними версиями).

Пример: http://jsfiddle.net/emn13/7FFp3/

Соответствующий HTML: (но<table>вместо этогорассмотрите возможность использования простого)

<div class="parent"><div>column 1</div><div>column 2</div></div>

Соответствующее CSS:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

Этот подход гораздо надежнее, чем использование overflow:hiddenс плавающей точкой. Вы можете добавить практически любое количество столбцов; Вы можете иметь их автоматическое масштабирование, если хотите; и вы сохраняете совместимость с древними браузерами. В отличие от плавающего решения, вам также не нужно заранее знать, какой столбец самый длинный; высота весы просто отлично.

ПОЦЕЛУЙ: не используйте хаки с плавающей точкой, если вам это не нужно. Если бы IE7 представлял собой проблему, я бы все равно выбрал простую таблицу с семантическими столбцами вместо трудно поддерживаемого, менее гибкого решения CSS-трюка в любой день.

Кстати, если вам нужно, чтобы ваш макет был отзывчивым (например, нет колонок на небольших мобильных телефонах), вы можете использовать @mediaзапрос, чтобы вернуться к простому блочному макету для небольшой ширины экрана - это работает, используете ли вы <table>или любой другой display: tableэлемент.

3. display:inline blockс отрицательной маркой взломать.

Другой альтернативой является использование display:inline block.

Пример: http://jsbin.com/ovuqes/2/edit

Соответствующий HTML: (отсутствие пробелов междуdivтегами является значительным!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

Соответствующее CSS:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

Это немного сложно, а отрицательное поле означает, что «истинное» дно столбцов скрыто. Это, в свою очередь, означает, что вы не можете расположить что-либо относительно нижней части этих столбцов, потому что это отрезано overflow: hidden. Обратите внимание, что в дополнение к встроенным блокам вы можете добиться аналогичного эффекта с помощью float.


TL; DR : используйте flexbox, если вы можете игнорировать IE9 и старше; в противном случае попробуйте таблицу (css). Если ни один из этих вариантов не работает для вас, существуют негативные взломы маржи, но они могут вызвать странные проблемы с отображением, которые легко пропустить во время разработки, и существуют ограничения макета, о которых вам необходимо знать.

Имон Нербонн
источник
1
Хороший, но стоит отметить, что вы не можете использовать поля между этими ячейками (и заполнение не поможет, если вы хотите, чтобы они стилизовались).
Wordpressor
3
border-spacing:10px;на элементе таблицы введем интервал в виде полей. Кроме того, вы можете добавить дополнительные (пустые) столбцы, где вы хотите дополнительное пространство. И вы также можете добавить заполнение внутри ячеек таблицы; этот отступ будет включен в фоновый режим, так что это может быть не то, что вы хотите. Но вы правы, что это не так гибко, как нормальный запас. И вы ничего не можете расположить относительно столбцов, что может быть проблемой.
Имон Нербонн
1
Так лучше верстка без стола или нет?
динамичный
3
Я должен сказать: я согласен с вами, что в этом случае простой таблицы более чем достаточно. Проблема заключается в том, что существует общее представление о игнорировании каждого макета с таблицей
динамическое
3
Проблема с таблицей заключается в том, что при изменении размера экрана до меньшей ширины (адаптивный дизайн) ячейки таблицы сжимаются, вместо того, чтобы размещать одну поверх верхней части следующей. Второй метод с padding-bottom: 32768px; нижнее поле: -32768 пикселей; это довольно удивительно и делает почти точно то, что мне было нужно ... спасибо за это ... граница - это проблема, хотя ...
Серж Саган
23

Для родителя:

display: flex;

Для детей:

align-items: stretch;

Вы должны добавить некоторые префиксы, проверьте caniuse.

Aiphee
источник
2
Не рекомендую. IE9 все еще вещь.
Спасибо за ваш ответ; это работает хорошо! «Вы должны добавить некоторые префиксы, проверьте caniuse». что вы подразумеваете под этой линией? Можете ли вы добавить немного больше информации для начинающих?
Md Sifatul Islam
@MdSifatulIslam Перейдите по ссылке: caniuse.com/#feat=flexbox Вы можете увидеть, требуется ли префиксу функции для какого-либо браузера, который вам необходим для поддержки.
Aiphee
18

Я нашел много ответов, но, вероятно, лучшее решение для меня

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Вы можете проверить другие решения здесь http://css-tricks.com/fluid-width-equal-height-columns/

Добромир Минчев
источник
Я понятия не имею, почему эта работа, но она решает мою проблему, как шарм. Спасибо
Объединение
У меня тоже работает. Хотя это не чистый путь. Спасибо!
Марк Энтони Уй
18
хакерский как черт. Я не рекомендую это для производственных приложений
FedericoCapaldo
это удивительно, ха-ха. Я не думал, что это на самом деле сработает
Том Макдоно,
11

Пожалуйста, установите родительский div, чтобы overflow: hidden
затем в дочерних divах вы могли установить большое значение для padding-bottom. например,
padding-bottom: 5000px
тогда margin-bottom: -5000px
и тогда все дочерние элементы будут высотой родительского элемента.
Конечно, это не сработает, если вы пытаетесь поместить содержимое в родительский div (кроме других div).

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}
<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Пример: http://jsfiddle.net/Tareqdhk/DAFEC/

Тарек
источник
кажется немного грязным, но сработало для меня - единственное решение по этому вопросу. Я попробовал это с помощью Twitter начальной загрузки.
cukabeka
8

Родитель имеет рост? Если вы установите родительский рост так.

div.parent { height: 300px };

Затем вы можете сделать так, чтобы ребенок растянулся на полную высоту.

div.child-right { height: 100% };

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

Вот как вы могли бы сделать это с помощью JavaScript.

Olical
источник
родитель не имеет фиксированной высоты. Это расширяется согласно росту слева от ребенка.
Веера
Ах, я так и думал, тогда вам понадобится немного JavaScript, я добавлю его через секунду.
Olical
@Olical JSFiddle ссылка не работает. Либо удалите его, либо обновите ответ. Спасибо!
itsmysterybox
1
Ссылка на JS теперь дает 404
Chanoch
5

Отображение таблицы CSS идеально подходит для этого:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Исходный ответ (предполагается, что любой столбец может быть выше):

Вы пытаетесь сделать рост родителей зависимым от роста детей, а рост детей - от роста родителей. Не будет вычислять CSS Faux колонки - лучшее решение. Есть несколько способов сделать это. Я бы предпочел не использовать JavaScript.

Салман А
источник
Хорошая точка зрения. Как насчет того, зависит ли рост детей от роста самого высокого брата (зависит ли это от роста родителя или нет), а не от родителя? Я думаю, что это не может быть сделано в CSS.
Микато
Нет, братья и сестры не могут влиять на рост друг друга. Тем не менее, display: table+ display: table-cellмакет даст желаемый результат.
Салман А
Отличное обновление! Тем не менее, я попытался это сделать, и я хотел разделить пробелами между divs / cell и закончил тем, что делал внутренние div внутри div'ов table-cell, чтобы выполнить это, а затем, конечно, потерял способность заставлять их использовать всю высоту потому что внутренние div не были div-элементами табличных ячеек - точно такая же проблема. Есть идеи для этого? Вид пропущенного межстрочного интервала сейчас.
Микато
Ах, в CSS есть интервал между границами! stackoverflow.com/questions/339923/… Мне удалось заставить мои div-элементы, похожие на таблицы, хорошо работать с разделением пробелов, используя интервал границы. Теперь у меня есть возможность заставить ячейки таблицы (цветные фоновые блоки) использовать полную высоту родительского элемента или нет, используя умные элементы div таблицы-ячейки.
Микато
Просто недоработка, с которой я столкнулся: вы не можете использовать это с float: stackoverflow.com/questions/20110217/…
Джошуа Пинтер
4

Я недавно сделал это на своем сайте с помощью jQuery. Код вычисляет высоту самого высокого div и устанавливает остальные div на ту же высоту. Вот техника:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

Я не верю, что height:100%это сработает, поэтому, если вы явно не знаете высоты div, я не думаю, что есть чистое решение CSS.

ajcw
источник
1
Вы должны вызвать это, по крайней мере, при готовности, изменении размера, изменении ориентации, изменении размера шрифта.
netAction
4

Я использовал это для раздела комментариев:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Вы можете перемещать ребенка вправо вправо, но в этом случае я точно рассчитал ширину каждого деления.

larsgrafik
источник
1
Первое, что пришло мне в голову, это рост: наследовать не уверен, почему никто не проголосовал
Андреас
3

Если вы знаете о начальной загрузке, вы можете легко это сделать, используя свойство 'flex'. Все, что вам нужно сделать, это передать свойства css ниже родительскому div.

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

где .homepageSectionмой родительский див Теперь добавьте child div в ваш html как

<div class="abc col-md-6">
<div class="abc col-md-6">

где abc - мой дочерний элемент div. Вы можете проверить равенство роста в обоих дочерних элементах div независимо от границы, просто задав границу для дочернего элемента div.

Навед Али
источник
0
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

Я использовал встроенный стиль, чтобы дать идею.

suketup
источник
-2

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

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>
Джоэл Лим
источник