最小高度与绝对定位 [英] min-height with absolute positioning

问题描述

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

I have an area on my page #topLeft which has a minimum height set to it.

在#topLeft内有一个#hero横幅我希望锚到#topLeft的底部 - 使用position：absolute; bottom：0;

Within #topLeft I have a section #heroBanners that I wish to anchor to the bottom of #topLeft - using position:absolute; bottom:0;

首先这个工作正常，但是#topLeft应该展开它是不是和heroBanner部分只是重叠上面的内容。

At first this works fine, however when #topLeft should expand it is not and the heroBanner section simply overlaps the content above it.

我假设通过混合一个最小高度和绝对定位内容来调用这个问题？

I am assuming the problem is called by mixing a min-height with absolute positioned content?

任何想法如何绕过这个，代码如下：

Any ideas how to get round this, code below:

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

推荐答案

你把两个块或div放在一个新的div，并将其风格设置为{ bottom：0;位置：绝对; }而不是heroBanners。

It would be quite easy if you put both blocks or divs in a new div and set its style to {bottom:0; position:absolute;} instead of 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;}

这篇关于最小高度与绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！