具有绝对定位的最小高度

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;}