Html 容器分区高度未调整大小?
我知道有一百零一个关于自动调整div高度的问题,但似乎没有任何建议对我有效,这让我相信我遗漏了一些明显的东西。基本上我有一个容器Div,然后在里面有另一个较小的Div(绝对定位),在这一侧我有X个正在创建的Div框(相对定位)。问题是主容器div的高度不会随之拉伸。有什么帮助吗?谢谢Html 容器分区高度未调整大小?,html,css,Html,Css,我知道有一百零一个关于自动调整div高度的问题,但似乎没有任何建议对我有效,这让我相信我遗漏了一些明显的东西。基本上我有一个容器Div,然后在里面有另一个较小的Div(绝对定位),在这一侧我有X个正在创建的Div框(相对定位)。问题是主容器div的高度不会随之拉伸。有什么帮助吗?谢谢 .mainContainer{ position: relative; width:800px; height:auto; padding-top:10px; margin-
.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;
}
您也应该为smallerDivinsIndiv使用相对位置,主div将根据包含的div的总大小(也包括它们的边距)自动调整大小,但它将忽略您的“top:50px;”。为此,您可以添加一个空div
<div style='height: 50px;'></div>
在仍然在主容器中的SmallerDivinsIndiv之后,类似于:
.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>
.smallerdivisindemandiv{
位置:相对位置;
x1
x2
据我所知,在相对定位的元素中不能有绝对定位的元素,并尝试将父元素的高度调整为绝对子元素的高度。如果仅用于左右定位,请使用边距
<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>
.主集装箱{
宽度:800px;
高度:自动;
填充顶部:10px;
左边距:自动;
右边距:自动;
边框样式:实心;
边框宽度:2倍;
背景:#999;
}
斯莫勒迪文斯马迪夫{
左边距:20px;
边缘顶部:50px;
背景:#CCC;
宽度:200px;
}
.溢出的分区{
边缘顶部:20px;
边框样式:实心;
边框宽度:1px;
背景:红色;
高度:300px;
宽度:100px;
}
这里的父级为深灰色,内部较小的div为浅灰色,溢出的div为红色。当它改变高度时,两个容器都会调整。为什么使用绝对位置?