绝对定位的最小高度答案

【问题标题】：min-height with absolute positioning绝对定位的最小高度
【发布时间】：2011-07-06 11:09:28
【问题描述】：

我的页面#topLeft 上有一个区域，该区域设置了最小高度。

在#topLeft 中，我有一个部分#heroBanner，我希望将其锚定到#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;}

【问题讨论】：

标签： html positioning css-position css

【解决方案1】：

如果您将块或 div 都放入一个新的 div 并将其样式设置为 {bottom:0; position:absolute;} 而不是 heroBanner，那将非常容易。

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

【讨论】：