Расширение родителя <div>до высоты его потомков - PullRequest
Новая
       32

Расширение родителя <div>до высоты его потомков

275 голосов
/ 21 декабря 2008

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

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

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

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

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

Ответы [ 16 ]

0 голосов
/ 07 июня 2017

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

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

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

0 голосов
/ 27 августа 2015 

#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

0 голосов
/ 19 марта 2014

Если ваш контент внутри #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; }
0 голосов
/ 13 июля 2013

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

0 голосов
/ 18 марта 2013

Я использую этот 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%;
0 голосов
/ 05 июня 2010

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

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...