最小高度绝对定位

时间:2011-03-01 11:52:55

标签: html positioning css-position css

我的页面#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;}

1 个答案:

答案 0 :(得分:2)

如果你将两个块或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;}