min - высота с ребенком, установленным в положение: абсолют

Question

У меня есть контейнер div с дочерним div, установленным в абсолютную позицию относительно его родителя. Контейнер div имеет свою минимальную высоту, однако, когда высота дочернего элемента div увеличивается по высоте родительского элемента, растягивается родительский doest Это связано с абсолютным позиционированием ребенка. Есть ли идеи, как я могу заставить родителей растягиваться с ребенком, когда его рост увеличивается

#parent{
 position:relative;
 min-height:200px;
 width:200px;
}

#child{
  position:absolute;
  top:0;
  left:0;
  min-height:150px;
}

<div id="parent">
 <div id="child"></div>
</div>

Answer 1

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

Теперь альтернативой может быть использование переполнения, скрытого в родительском элементе, и наличие полосы прокрутки для оставшегося содержимого. Смотрите мой пример на jsfiddle :

#parent{
 position:relative;
 min-height:200px;
 width:200px;
 border: 1px solid #ccc;   
 overflow-y: scroll;   
}

#child{
  position:absolute;
  top:0;
  left:0;
  min-height:150px;
}

<div id="parent">
 <div id="child">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci sit amet eros hendrerit tristique. Mauris non felis purus, sit amet molestie dolor. Quisque iaculis ante ac massa suscipit fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel lectus urna, vel condimentum felis. In vel justo lorem, vel vulputate tortor. Morbi hendrerit erat at ipsum tempus ut sollicitudin nisi consectetur. Suspendisse potenti. Donec varius orci at mi consequat porttitor. Integer vestibulum convallis ultricies. Mauris imperdiet mauris nec nunc fringilla varius. Nunc molestie tempus mi, quis congue libero iaculis eget. Vestibulum a odio nisl. Mauris mollis consequat est, id porttitor metus semper sed. Sed magna lacus, pulvinar vel laoreet vel, dignissim at sem. Aliquam erat volutpat. Donec sit amet nibh sit amet arcu hendrerit facilisis. Nunc euismod, sapien eget fermentum sagittis, tortor felis varius velit, non tincidunt sapien diam in augue.</p> 
  </div>
</div>

Answer 2

Я не думаю, что вы можете сделать то, что вы просите.Вы можете установить body, html: { height: 100%; }, а затем изменить родительский div на height: 100%;, и это будет эффективно делать то, что вы хотите.Но без знания другой разметки HTML здесь сложно дать разумный ответ.