为什么我的文本div溢出我的容器div？

Question

我真的需要你的帮助，

我似乎无法弄清楚为什么我的div #text溢出我的容器div？它应该很好地适合它的容器吗？

这是CSS标记：

    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    display: none;
}

#container {
    background: #FFF;
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 2px solid rgb(100,139,170);
    height: 100%;
    position: relative;
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100,139,170);
    padding: 4px;
    font-weight: bold;
}
#text {

    height: 100%;
    border: 1px solid red;

}

HTML：

<div id="wrapper">

    <div id="container">

        <div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>

        <div id="text"><p>test</p></div>

    </div>

</div>

以下是问题的快照：

Answer 1

#text的高度为100%，这意味着它获得了包含块的高度，在本例中为#container。 #text以及#container的高度均为500px。但#text被其兄弟.topbar推倒，导致它溢出。

要解决此问题，您可以在评论中使用Jarred Farrish建议的css属性overflow:auto

Answer 2

因为#test {height:100%;}它会查找父亲的身高，所以#wrapper一直设置为height:100px，所以#test将获得相同的高度，加上边框，#container没有足够的空间来容纳它（由于额外的蓝色条），所以它会溢出。

我也注意到布局可以简化如下。

＆＃13;

＆＃13;

#wrapper {
    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    margin-bottom: -50px; /*half height*/
    margin-right: -250px; /*half width*/
    position: absolute;
    /* display: none; */
}
#container {
    background: #FFF;
    border: 2px solid rgb(100, 139, 170);
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100, 139, 170);
    padding: 4px;
    font-weight: bold;
}
#text {
    border: 1px solid red;
}

＆＃13;

<div id="wrapper">
    <div id="container">
        <div style="float:left;" class="topbar">Custom Dialog Box</div>
        <div class="topbar" style="text-align: right;">Close</div>
        <div id="text">
            <p>test</p>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您正在考虑#container的高度，但请记住，容器顶部还有一个标题，因此文本height应该是＆lt; height。 100％，因为您必须减去对话框标题的Console.WriteLine。

Answer 4

Amir明白了，你可以“修复”这个方法就是为内容添加填充，这样你就有了安全的空间。

CodePen Sample

<div id="wrapper">

<div id="container">

    <div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>

    <div id="text"><p>test</p></div>

</div>

#wrapper{
    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    margin-right: -250px;
    position: absolute;
    border: 1px solid yellow;
}

#container {
    background: #FFF;
    left: 0%;
    padding-bottom: 30px;
    top: 0%;
    margin: 0;
    height: 100%;
    border: 2px solid rgb(100,139,170);
    position: relative;
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100,139,170);
    padding: 4px;
    font-weight: bold;
    border: 1px solid green;
}
#text {
    height: 100%;
    border: 1px solid red;
}

我也为你定了定位。