минимальная высота с абсолютным позиционированием

Question

На моей странице есть область #topLeft, для которой установлена ​​минимальная высота.

Внутри #topLeft у меня есть раздел #heroBanners, который я хочу привязать к нижней части #topLeft - используя position: absolute; внизу: 0;

Сначала это работает нормально, однако, когда #topLeft должен расширяться, это не так, и раздел heroBanner просто перекрывает содержимое над ним.

Я предполагаю, что проблема вызвана смешиванием минимальной высоты с абсолютным позиционированным содержимым?

Любые идеи, как обойти это, код ниже:

<div id="topLeft">
<div class="linksBox"> 
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">

</div>

</div>

#topLeft {margin:0 27px 27px 0;  width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}

#heroBanners {bottom:0; position:absolute;}

Answer 1

Было бы довольно легко, если вы поместите оба блока или div в новый div и установите его стиль {bottom:0; position:absolute;} вместо heroBanners.

<div id="parent">
<div id="topLeft">
<div class="linksBox"> 
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">

</div>

</div>
</div>
#topLeft {margin:0 27px 27px 0;  width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}

#parent {bottom:0; position:absolute;}