минимальная высота с дочерним элементом, установленным в положение: абсолютное

#css #xhtml

Вопрос:

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

 #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>

1. зачем вам нужно абсолютно позиционировать дочерний элемент? Это кажется излишним.

2. Вы знаете, какой будет высота родительского div? Или это меняется со временем?

3. @ima student Причина в том, что мне нужно установить 2 дочерних подразделения рядом. Я бы использовал float, но мне нужно установить zindex. это можно сделать, только если элемент имеет абсолютную или относительную позицию

Ответ №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>

Ответ №2:

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