CSS - Разверните родительскую высоту DIV до родительской высоты
У меня есть структура страницы как:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
Теперь child-left
DIV будет иметь больше контента, поэтому высота parent
DIV увеличивается в соответствии с дочерним DIV.
Но проблема в том, что высота child-right
не увеличивается. Как я могу сделать свой рост равным ему родительским?
Ответы
Ответ 1
для родительского элемента добавьте следующие свойства
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
то для .child-right
:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Ниже вы можете найти более подробные результаты с примерами CSS: http://jsbin.com/nimeguxuda/1/edit?html,css,output
Более подробную информацию о равных колонках высоты можно найти в http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Ответ 2
Общее решение этой проблемы использует абсолютное позиционирование или обрезанные поплавки, но они сложны в том, что они требуют обширной настройки, если ваши столбцы изменяются в количестве + размер, и что вам нужно убедиться, что ваш "главный" столбец всегда длинный. Вместо этого я предлагаю вам использовать еще одно надежное решение:
-
display: flex
: на сегодняшний день самое простое и лучшее решение и очень гибкое, но не поддерживается IE9 и старше.
-
table
или display: table
: очень простой, очень совместимый (почти каждый браузер когда-либо), довольно гибкий.
-
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 + floats просто не лучший способ сделать это (не говоря уже о том, что несколько уровней вложенных div только для взлома ограничений css вряд ли более "семантичны", чем просто использование простой таблицы). Если вы не хотите использовать элемент table
, рассмотрите css display: 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
с поплавками. Вы можете добавить почти любое количество столбцов; вы можете их автоматически масштабировать, если хотите; и вы сохраняете совместимость с древними браузерами. В отличие от решения с плавающей точкой, вам также не нужно заранее знать, какой столбец наиболее длинный; высота шкалы очень хорошая.
KISS: не используйте поплавковые хаки, если вам это не нужно. Если 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). Если ни один из этих параметров не работает для вас, есть негативные маркеры, но это может вызвать странные проблемы с отображением, которые легко пропустить во время разработки, и есть ограничения макета, о которых вам нужно знать.
Ответ 3
Я нашел много ответов, но, вероятно, лучшим решением для меня является
.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/
Ответ 4
Для родителя:
display: flex;
Для детей:
align-items: stretch;
Вы должны добавить некоторые префиксы, проверить caniuse.
Ответ 5
Установите родительский div в overflow: hidden
то в дочерних divs вы можете установить большую величину для padding-bottom. например,
padding-bottom: 5000px
то margin-bottom: -5000px
и тогда все дочерние div будут высотой родителя.
Конечно, это не сработает, если вы пытаетесь поместить контент в родительский div (вне других divs, который есть)
.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>
Ответ 6
Есть ли у родителя высота? Если вы установите родительскую высоту так.
div.parent { height: 300px };
Затем вы можете сделать ребенка растягиваться на всю высоту, как это.
div.child-right { height: 100% };
ИЗМЕНИТЬ
Вот как вы это сделаете с помощью JavaScript.
Ответ 7
Недавно я сделал это на своем веб-сайте, используя jQuery. Код вычисляет высоту самого высокого div и устанавливает другие divs на одну и ту же высоту. Здесь техника:
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
Я не верю, что height:100%
будет работать, поэтому, если вы явно не знаете высоты div, я не думаю, что есть чистое решение CSS.
Ответ 8
Отображение таблицы 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>
Ответ 9
Я использовал это для раздела комментариев:
.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>
Ответ 10
Если вы знаете о загрузке, вы можете сделать это легко, используя свойство "flex". Все, что вам нужно сделать, это передать ниже свойства css родительскому div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
где .homepageSection
- мой родительский div.
Теперь добавьте дочерний div в свой html как
<div class="abc col-md-6">
<div class="abc col-md-6">
где abc - мой дочерний div. Вы можете проверить равенство высоты в обоих дочерних div независимо от границы, просто предоставив границу дочернему div
Ответ 11
<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>
Я использовал встроенный стиль, чтобы дать идею.
Ответ 12
Я узнал об этом опрятном трюке в интервью для интернатуры. Первоначальный вопрос заключается в том, как обеспечить, чтобы высота каждого верхнего компонента в трех столбцах имела ту же высоту, что и весь доступный контент. В основном создайте дочерний компонент, который невидим, который отображает максимально возможную высоту.
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>