我知道有一百一个关于自动调整div高度的问题,但似乎没有任何建议对我有效,这让我相信我错过了一些明显的东西。基本上我有一个容器Div,然后是另一个较小的div(绝对定位)和侧面,我有一个关于创建div盒的X(相对定位)。问题是主容器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 :(得分: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>
这里的父母是深灰色,内部较小的div是浅灰色,溢出的div是红色。当它改变高度时,它的两个容器都会调整。
答案 1 :(得分:2)
你也应该使用相对位置的smallDivInsideMainDiv,主div将自动调整所包含的div的总大小(也有它们的边距),但它会忽略你的“top:50px;”。为此你可以添加一个空div
<div style='height: 50px;'></div>
在littleDivInsideMainDiv之后仍然在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>