使绝对定位div展开父div高度 [英] Make absolute positioned div expand parent div height

问题描述

我面对一个挑战，我绝望解决asap。正如你可以看到在下面的CSS，我想让child2在child1之前自己定位。这是因为我目前开发的网站也应该在移动设备上，child2应该在底部，因为它包含我想在移动设备上的内容下面的导航。 - 为什么不是2个母版？这是唯一在整个HTML中重新定位的2个div，因此这个小改动的2个母版页是过度的。

HTML：

 < div id =parent> 
< div class =child1>< / div> 
< div class =child2>< / div> 
< / div> 
  

CSS：

 code> parent {position：relative;宽度：100％; } 
 child1 {width：auto; margin-left：160px; } 
 child2 {width：145px; position：absolute; top：0px; bottom：0px; } 
  

child2具有动态高度，因为不同的子网站可能具有更多或更少的导航项。

我知道绝对定位的元素从流中删除，因此被其他元素忽略。

我尝试设置 overflow：hidden; / code>在父div，但没有帮助，也没有clearfix。

我最后的手段将是javascript重新定位两个div

解决方案

你回答了问题：我知道绝对定位的元素从流中移除，因此被其他元素忽略。所以你不能根据绝对定位的元素来设置父级的高度。

你可以使用固定的高度，或者你需要涉及JS。

I'm facing a challenge which I'm desperate to solve asap. As you can see in the CSS below, I want child2 to position itself before child1. This is because the site I'm currently developing should also work on mobile devices, on which the child2 should be at the bottom, as it contains the navigation which I want below the content on the mobile devices. - Why not 2 masterpages? This is the only 2 divs which are repositioned in the entire HTML, so 2 masterpages for this minor change is an overkill.

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 has dynamic height, as different subsites could have more or less navigation items.

I know that absolute positioned elements are removed from the flow, thus ignored by other elements.
I tried setting overflow:hidden; on the parent div, but that didn't help, neither does the clearfix.

My last resort will be javascript to reposition the two divs accordingly, but for now I'll try and see if there exist a non-javascript way of doing this.

解决方案

You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JS.

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