绝对定位的最小高度

发布于 2024-10-19 11:28:47 字数 710 浏览 4 评论 0原文

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

原文

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水水月牙 2024-10-26 11:28:47

如果将块或 div 放入新的 div 中并将其样式设置为 {bottom:0;位置：绝对;}而不是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 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;}

回复收藏 0 原文

~没有更多了~