308

У меня есть структура страницы, похожая на эту:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Я хотел бы , чтобы родитель divрасширяться в heightкогда внутренний div«S heightувеличивается.

Редактировать:
одна проблема заключается в том, что если widthдочерний контент расширяется widthза пределы окна браузера, мой текущий CSS помещает горизонтальную полосу прокрутки на родительский div. Я хотел бы, чтобы полоса прокрутки была на уровне страницы. В настоящее время мой родительский div установлен наoverflow: auto;

Можете ли вы помочь мне с CSS для этого?

html css Стив Хорн
источник

6

Вы плывете по внутренним элементам? Можете ли вы опубликовать текущий CSS?

Эрик

2

@Eric - это тоже была моя проблема - у моего дочернего div (ов) был float: left, когда я его убрал, «parent» автоматически распознавался и растягивался на полную высоту!

Майкл Гольцман

539

Попробуйте это для родителя, это работало для меня.

overflow:auto;

ОБНОВИТЬ:

Еще одно решение, которое сработало:

Родитель :

display: table;

Ребенок :

display: table-row;

Доктор Каспер Блэк
источник

67

overflow:autoозначает, что браузер должен решить, какое значение применить. Что на самом деле делает трюк overflow: overlay.

Альба Мендес

14

@jmendeth Значение переполнения, называемое «оверлей», не существует. То, что работает, если дочерние элементы плавающие, объявляется overflow:hidden.

Кристоф

16

Waaaait. Расслабьтесь. Одна вещь утверждает, overlayчто не поддерживается за пределами Webkit. Еще одно совершенно другое - сказать, что его вообще не существует. Пожалуйста, сначала RTFM . ;)

Альба Мендес

6

Если это только на Webkit, то существует только 20%: P Приветствие за ссылку, никогда не видела этот сайт раньше. Это хорошо поддерживается и обновляется? Вы клянетесь этим?

Пилау

20

Альтернативный ответ - stackoverflow.com/questions/450903/… и он предлагает установить display:inline-block. Который работал отлично для меня.

Дженс

26

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

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

bendewey
источник

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

Стив Хорн

1

Зачем вам переполнение: авто;? В моем тесте ясно: оба; хватило.

Паоло Бергантино

3

Это также при условии, что у родителя не указана высота.

Bendewey

Этот подход прекрасно работает в Firefox, но не работает в IE 6. Есть ли обходные пути?

Стив Хорн

16

Как сказал Йенс в комментарии

Альтернативный ответ: Как сделать div не больше, чем его содержимое? … И предлагает установить отображение: inline-block. Который работал отлично для меня. - Дженс 2 июня в 5:41

Это работает намного лучше для меня во всех браузерах.

шумный
источник

13

Попробуйте дать max-contentдля роста родителей.

.parent{
   height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

Skotee
источник

Как это свойство ведет себя с другими браузерами? На MDN: developer.mozilla.org/en-US/docs/Web/CSS/…

Роберт Молина

Казалось, это единственное, что исправило проблему в Safari 12.

Бен Уилер

такое потрясающее значение CSS! не поддерживается в Edge ¯_ (ツ) _ / ¯

Самер Мурад

4

Для тех, кто не может это выяснить, в инструкции от этого ответа есть:

Попробуйте установить отступ значение более , то 0 , если ребенок дивы имеют маржу верхом или край дно , вы можете заменить его с дополнением

Например, если у вас есть

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

будет лучше заменить его на:

#parent
{
    padding: 30px 0px 20px 0px;
}

IMY
источник

4

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

<div id="parent" class="clearfix">

Тим Найт
источник

3

Добавить

clear:both;

К css родительского div или добавьте div внизу родительского div, который очищает: оба;

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

Интернет-маркетинг Бойсе
источник

2

Делает ли это то, что вы хотите?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Эрик
источник

1

Вы ищете макет CSS с двумя столбцами ?

Если это так, взгляните на инструкции , это довольно просто для начала.

lpfavreau
источник

1

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

Пример:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Основываясь на том, что maincolumn div является самым глубоким дочерним div в #wrap, это определяет глубину #wrap div, а заполнение 200px с каждой стороны создает два больших пустых столбца, в которые вы можете поместить абсолютно позиционированные div в соответствии с вашими потребностями. Вы можете даже изменить верхний и нижний отступы, чтобы разместить div и верхний колонтитул, используя position: absolute.

Ян
источник

0

Вы должны применить решение clearfix к родительскому контейнеру. Вот хорошая статья, объясняющая исправление ссылки

Нихилу
источник

0

Если ваш контент внутри #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; }

user3436572
источник

0

Это функционирует, как описано в спецификации - несколько ответов здесь действительны и соответствуют следующему:

Если у него есть дочерние элементы уровня блока, высота - это расстояние между верхней границей верхнего дочернего блока уровня блока, у которого нет полей, свернутых через него, и нижней границей самого нижнего дочернего блока уровня блока. это не имеет полей рухнуло через это. Однако, если элемент имеет ненулевое верхнее заполнение и / или верхнюю границу или является корневым элементом, содержимое начинается с верхнего края поля верхнего дочернего элемента. (В первом случае выражается тот факт, что верхние и нижние поля элемента сжимаются с полями самого верхнего и самого нижнего дочерних элементов, тогда как во втором случае наличие отступов / границы предотвращает свертывание верхних полей.) Аналогично, если элемент имеет ненулевое нижнее заполнение и / или нижнюю границу, затем содержимое заканчивается на краю нижнего поля самого нижнего дочернего элемента.

отсюда: https://www.w3.org/TR/css3-box/#blockwidth

Адам Толли
источник

0

Ниже код работал для меня.

CSS

.parent{
    overflow: auto;
}

HTML

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>

anjaneyulubatta505
источник

0

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
    display:inline;
}

Развернуть фрагмент

YourBestBet
источник

0

С чего мы начинаем

Вот несколько шаблонов 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>

Развернуть фрагмент

Решение № 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: родительский контейнер Float

Другое решение, которое работает во всех современных браузерах и обратно в 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: Добавить клиринг Div ниже плавающих элементов

/* 
 * 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: Добавить Clearing 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/

jafar690
источник

-1

Я использую этот 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%;

Pejman
источник

2

Вы используете минимальную высоту, так что не считается;)

плов

-1

#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

Chintan Kotadiya
источник

Расширение родительского элемента <div> до высоты его дочерних элементов

Ответы:

CSS

HTML