2012-03-17 107 views
2

我知道有一百个关于自动调整div高度的问题,但没有任何建议似乎对我有用,这导致我相信我错过了一些明显的东西。基本上我有一个容器Div,然后是另一个更小的div(绝对定位),并且我有一个X有关创建(相对定位)的div盒的一面。问题是主容器div的高度不会随着它伸展。任何帮助?谢谢!集装箱股高不调整大小?

.mainContainer{ 
    position: relative; 
    width:800px; 
    height:auto; 
    padding-top:10px; 
    margin-left: auto; 
    margin-right: auto; 
    border-style:solid; 
    border-width:2px; 
} 
.smallerDivInsideMainDiv{ 
    position:absolute; 
    left: 20px; 
    top: 50px; 
    width: 600px; 
} 
.divsThatAreOverflowing{ 
    position: relative; 
    margin-top:20px; 
    border-style:solid; 
    border-width:1px; 
} 
+0

你为什么使用绝对位置? – Jared 2012-03-17 01:50:37

回答

4

据我所知,你不能有一个内部的相对定位绝对定位的元素元素并尝试将父高度调整为绝对子元素。如果您仅将它用于左右定位,请改用边距。

<style> 
.mainContainer{ 
    width: 800px; 
    height: auto; 
    padding-top: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    border-style: solid; 
    border-width: 2px; 
    background: #999; 
} 
.smallerDivInsideMainDiv{ 
    margin-left: 20px; 
    margin-top: 50px; 
    background: #CCC; 
    width: 200px; 
} 
.divsThatAreOverflowing{ 
    margin-top: 20px; 
    border-style: solid; 
    border-width: 1px; 
    background: red; 
    height: 300px; 
    width: 100px; 
}​ 
</style> 

<div class="mainContainer"> 
    <div class="smallerDivInsideMainDiv"> 
<div class="divsThatAreOverflowing"></div> 
    </div></div> 

enter image description here

这里母体是深灰色,而较小的DIV中是浅灰色,与溢出DIV为红色。当它改变高度时,它的两个容器都会调整。

+0

太棒了,谢谢! – 2012-03-17 02:24:33

2

您应该使用相对位置的smallerDivInsideMainDiv太和主DIV将与包含的div的总大小(用他们的利润太)自动调整大小,但它会忽略你的“顶部:50像素;” 。对于您可以smallerDivInsideMainDiv后面加一个空div

<div style='height: 50px;'></div> 

同时还在mainContainer上,是这样的:

.smallerDivInsideMainDiv{ 
    position:relative; 

<div class="mainContainer"> 
    <div class="smallerDivInsideMainDiv"> 
     <div class="divsThatAreOverflowing">x1</div> 
     <div class="divsThatAreOverflowing">x2</div> 
    </div> 
    <div style='height: 50px;'></div> 
</div>