min-height con posición absoluta

Question

Tengo un área en mi página #topLeft que tiene una altura mínima establecida.

Dentro de #topLeft Tengo una sección #heroBanners que deseo anclar en la parte inferior de #topLeft - using position: absolute; abajo: 0;

Al principio, esto funciona bien, sin embargo, cuando #topLeft debería expandirse no lo es y la sección heroBanner simplemente se superpone al contenido que está sobre ella.

Supongo que se llama al problema mezclando una min-altura con contenido absoluto posicionado?

Alguna idea de cómo conseguir alrededor de esto, código de abajo:

<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

Sería muy fácil si se pone ambos bloques o divs en una nueva div y configura su estilo a {bottom:0; position:absolute;} en lugar de 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;}