容器div高度未调整大小？

Question

我知道有一百零一个关于自动调整 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;
}

Answer 1

据我所知，您不能在相对定位的元素内拥有绝对定位的元素，并尝试将父级高度调整为绝对子级。如果您仅将其用于左右定位，请改用边距。

\n\n

<style>\n.mainContainer{\n    width: 800px;\n    height: auto;\n    padding-top: 10px;\n    margin-left: auto;\n    margin-right: auto;\n    border-style: solid;\n    border-width: 2px;\n    background: #999;\n}\n.smallerDivInsideMainDiv{\n    margin-left: 20px;\n    margin-top: 50px;\n    background: #CCC;\n    width: 200px;\n}\n.divsThatAreOverflowing{\n    margin-top: 20px;\n    border-style: solid;\n    border-width: 1px;\n    background: red;\n    height: 300px;\n    width: 100px;\n}\xe2\x80\x8b\n</style>\n\n<div class="mainContainer">\n    <div class="smallerDivInsideMainDiv">\n<div class="divsThatAreOverflowing"></div>\n    </div></div>\n

\n\n

\n\n

这里的父级是深灰色的，内部较小的 div 是浅灰色的，溢出的 div 是红色的。当它改变高度时，它的两个容器都会调整。

\n