在将填充物添加到标题标签之后，第二个元素(ContentTab)太高/超过容器(外部)

Question

我的html是：

<div id="outer">
    <header><h1>The Header</h1></header>
    <div id="contenttab">
        <table>
            blablabla
        </table>
    </div>
</div>

我的CSS：

#outer{
height:70%;
width:900px;
left:50%;
margin:0 auto;
position:absolute;
top:20px;
z-index:1001;
transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}
header{
    background-color:#f6f7f9;
    padding:10px;
    font-size:15px !important;
    font-weight:bold !important;
    text-align:center;
    width:100%;
}
#contenttab{
    height:100%;
    overflow-y:auto;
}

为什么我的contenttab超过#outerdiv的高度？如何解决？我尝试在父级Div中添加Border-Box CSS，但不能解决我的问题。。。

Answer 1

我刚刚尝试了您发布的html/css，而您的#ContentTabdiv超过了容器的高度，因为您的CCSS规则在#ContentTab上的height: 100%规则;

使用元素上的边框查看/调试问题要容易得多，请添加以下内容：

#outer {
  border: 1px solid #000;
}
#contenttab {
    height: 100%;
    overflow-y: auto;
    border: 1px solid #ffa500;
}

您告诉#ContentTab具有其容器的100％全高度，但是您还添加了其他内容(标题元素(，这会导致内部元素的高度超过100％的高度。

要么将#ContentTab上的高度规则更改为自动，要么将其更改为100％。或将CSS规则溢出：隐藏(或自动(到您的#outer CSS规则。