Расширение родительского <div> до высоты его дочерних элементов
У меня есть структура страницы, подобная этой:
<body>
<div id = "parent">
<div id = "childRightCol">
/*Content*/
</div>
<div id = "childLeftCol">
/*Content*/
</div>
</div>
</body>
Я бы хотел, чтобы родительский div расширился в height, когда увеличивается div внутреннего height.
Редактировать:
Одна из проблем заключается в том, что если width дочернего содержимого расширяется за пределы width окна браузера, мой текущий CSS помещает горизонтальную полосу прокрутки на родительский div. Я бы хотел, чтобы полоса прокрутки находилась на уровне страницы. В настоящее время мой родительский div установлен на overflow: auto;
Не могли бы вы помочь мне с CSS для этого?
@Eric - это тоже была моя проблема - у моего дочернего div (ов) было float: left, когда я удалил его, «родительский» был автоматически распознан и растянут на всю высоту!
Ответы 19
добавить clear:both. предполагая, что ваши столбцы плавающие. В зависимости от того, как указан ваш рост parent, вам может понадобиться переполнение: auto;
<body>
<div id = "parent">
<div id = "childRightCol">
<div>
<div id = "childLeftCol">
<div>
<div id = "clear" style = "clear:both;"></div>
</div>
</body>
Это дает мне горизонтальную полосу прокрутки на родительском div, когда содержимое шире окна браузера. Я бы хотел, чтобы горизонтальная прокрутка была на всей странице.
Зачем вам переполнение: auto ;? В моем тесте ясно: оба; хватило.
Это также предполагает, что у родителя не указана высота.
Этот подход отлично работает в Firefox, но не работает в IE 6. Есть ли обходные пути?
Вы ищете Двухколоночный макет CSS?
Если да, взгляните на инструкции, это довольно просто для начала.
Использование чего-то вроде самоочищающегося div идеально подходит для таких ситуаций, как это. Затем вы просто используете класс для родительского элемента ... например:
<div id = "parent" class = "clearfix">
Это делает то, что вы хотите?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
Для тех кто не может разобраться в этом в инструкции от этот ответ там:
Попробуйте установить значение набивкаболее, затем 0, если дочерние divs имеют верхний край или нижний край, вы можете заменить его заполнением
Например, если у вас есть
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
лучше заменить на:
#parent
{
padding: 30px 0px 20px 0px;
}
Попробуйте это для родителей, у меня это сработало.
overflow:auto;
Обновлено:
Еще одно решение, которое сработало:
Родитель:
display: table;
Ребенок:
display: table-row;
overflow:auto означает, что браузер должен решить, какое значение применить. Что на самом деле делает уловка, так это overflow: overlay.
@jmendeth Значение переполнения под названием «наложение» не существует. Что работает, если дочерние div перемещаются, объявляет overflow:hidden.
Вааааит. Расслабиться. Одно можно сказать о том, что overlay не поддерживается вне Webkit. Другое совершенно другое - сказать, что его вообще не существует. Пожалуйста, Сначала RTFM. ;)
Если он только на Webkit, то его существует только 20%: P Приветствую вас за ссылку, никогда раньше не видел этот сайт. Он в хорошем состоянии и обновляется? Вы клянетесь этим?
Альтернативный ответ - stackoverflow.com/questions/450903/…, и он предлагает установить display:inline-block. Что отлично сработало для меня.
Я заставил родительский div расширяться вокруг содержимого дочернего div, указав дочерний div как отдельный столбец, не имеющий какого-либо атрибута позиционирования, такого как absolute.
Пример:
#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}
Основываясь на том, что div maincolumn является самым глубоким дочерним div для #wrap, это определяет глубину div #wrap, а заполнение 200 пикселей с каждой стороны создает два больших пустых столбца, чтобы вы могли разместить абсолютно позиционированные div по своему усмотрению. Вы даже можете изменить верхний и нижний отступы, чтобы разместить блоки заголовков и нижних колонтитулов, используя position: absolute.
Добавлять
clear:both;
В css родительского div или добавьте div внизу родительского div, который очищает: оба;
Это правильный ответ, потому что overflow: auto; может работать для простых веб-макетов, но будет путаться с элементами, которые начинают использовать такие вещи, как отрицательная маржа и т. д.
Добавление div в нижней части родительского элемента без содержимого и очистки: оба решили проблему для меня. У всех других решений есть недостатки. И я согласен, это должен был быть принятый ответ.
Я использую этот CSS как родительский, и он работает:
min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
Вы используете min-height, поэтому не в счет;)
Вы должны применить решение clearfix к родительскому контейнеру. Вот хорошая статья, объясняющая исправление ссылка на сайт
Как сказал Йенс в комментарии
An alternative answer is How to make div not larger than its contents?… and it proposes to set display:inline-block. Which worked great for me. – Jens Jun 2 at 5:41
У меня это работает намного лучше во всех браузерах.
Если ваш контент внутри #childRightCol и #childRightCol перемещается влево или вправо, просто добавьте это в css:
#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
#parent{
background-color:green;
height:auto;
width:300px;
overflow:hidden;
}
#childRightCol{
color:gray;
background-color:yellow;
margin:10px;
padding:10px;
}<div id = "parent">
<div id = "childRightCol">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
</p>
</div>
</div>вы управляете с помощью свойства overflow:hidden; в css
Это работает, как описано в спецификации - здесь есть несколько правильных ответов, которые согласуются со следующим:
If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that doesn't have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that doesn't have margins collapsed through it. However, if the element has a nonzero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a nonzero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.
Попробуйте указать max-content за рост родителей.
.parent{
height: max-content;
}
https://jsfiddle.net/FreeS/so4L83wu/5/
Как это свойство ведет себя в других браузерах? На MDN: developer.mozilla.org/en-US/docs/Web/CSS/…
Казалось, это единственное, что устранило проблему в Safari 12.
такое потрясающее значение css! не поддерживается в Edge ¯_ (ツ) _ / ¯
Код ниже работал у меня.
css
.parent{
overflow: auto;
}
html
<div class = "parent">
<div class = "child1">
</div>
<div class = "child2">
</div>
<div id = "clear" style = "clear:both;"></div>
</div>
#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
display:inline;
}Откуда мы начинаем
Вот несколько шаблонов HTML и CSS. В нашем примере у нас есть родительский элемент с двумя плавающими дочерними элементами.
/* The CSS you're starting with may look similar to this.
* This doesn't solve our problem yet, but we'll get there shortly.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}<!-- The HTML you're starting with might look similar to this -->
<div class = "containing-div">
<div class = "floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class = "floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>Решение no 1: переполнение: авто
Решение, которое работает во всех современных браузерах и в Internet Explorer обратно в IE8, - это добавить overflow: auto к родительскому элементу. Это также работает в IE7 с добавленными полосами прокрутки.
/* Our Modified CSS.
* This is one way we can solve our problem.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
overflow: auto;
/*This is what we added!*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}Решение # 2: родительский контейнер с плавающей запятой
Еще одно решение, которое работает во всех современных браузерах и обратно в IE7, - это плавающий родительский контейнер.
Это не всегда может быть практичным, потому что плавающий родительский div может повлиять на другие части макета вашей страницы.
/* Modified CSS #2.
* Floating parent div.
*/
.containing-div {
background-color: #d2b48c;
display: block;
float: left;
/*Added*/
height: auto;
width: 100%;
/*Added*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}Метод № 3: добавление очищающего блока под плавающими элементами
/*
* CSS to Solution #3.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clear {
clear: both;
}<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class = "containing-div">
<div class = "floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class = "floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
<div class = "clear"></div>
</div>Метод №4: добавить очищающий Div к родительскому элементу Это решение довольно надежно как для старых, так и для новых браузеров.
/*
* CSS to Solution #4.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}<!-- Solution 4, make parent element self-clearing -->
<div class = "containing-div clearfix">
<div class = "floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class = "floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>от https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/
Вместо установки свойства высоты используйте min-height.
вы чемпион, это устранило проблему, с которой я боролся в IE :)))
Вы плаваете во внутренних div? Можете ли вы опубликовать текущий CSS?