导致这个可调整大小的div溢出100％高度容器的原因是什么？

Question

如果将可调整大小的黄色div拖动到其最大可能高度，它将溢出并显示滚动条。

＆＃13;

＆＃13;

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    height:100%;
    width: 100%;
    background-color: red;
    display: table;
}
.header {
    background-color: green;
    height:100%;
    display: table-row;
}
.content {
    width:100%;
    height: auto;
    background-color:white;
    display: table-row;

}

.control {
    resize: vertical;
    overflow: auto;
    background-color: yellow;
}

＆＃13;

<div class="container">
    <div class="header">&nbsp;</div>
    <div class="content">
        <div  class="control">&nbsp;</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

造成这种情况的原因以及如何预防？

Answer 1

这是因为黄色的盒子越来越大，直到它溢出容器;你可以使用CSS max-height: 100%来防止这种情况。这个问题是容器在黄色框展开时不断扩展，因此黄色框实际上从未填充可用空间。我通过提供容器position: relative和可调整大小的控件position: absolute来修复此问题。

＆＃13;

＆＃13;

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    height:100%;
    width: 100%;
    background-color: red;
    display: table;
    position: relative;
}
.header {
    background-color: green;
    height:100%;
    display: table-row;
}
.content {
    width:100%;
    height: auto;
    background-color:white;
    display: table-row;

}

.control {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
    resize: vertical;
    overflow: auto;
    background-color: yellow;
    max-height: 100%;
}

＆＃13;

<div class="container">
    <div class="header">&nbsp;</div>
    <div class="content">
        <div  class="control">&nbsp;</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;