Question

为什么div会溢出。我正在获得垂直滚动条。有些人请清楚地解释我错误的地方。

如果我删除任何评论，它的工作正常。

 * {
            padding: 0px;
            margin: 0px;
           box-sizing: border-box;
    }
body, html {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
       /*overflow: hidden;*/

}
#box {
        position: relative;
        width: 9%;
        height: 9%;
        background-color: #000;
        margin: 1% 1%;
        position: relative;
       /*float: left;*/

}

html代码

<html>
        <body>
                <div id="box"></div>
        </body>
</html>

Answer 1

由于collapsing margins

而发生这种情况

一个技巧是在容器的:before / :after中添加一些空内容（本例中为 body ）

body:before,
body:after{
        content:'';
        display:block;
        height:0;
        width:0;
        overflow:hidden;
}

全面工作演示：

＆＃13;

* {
            padding: 0px;
            margin: 0px;
           box-sizing: border-box;
    }
body, html {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
}
body:before,
body:after{
        content:'';
        display:block;
        height:0;
        width:0;
        overflow:hidden;
}
#box {
        position: relative;
        width: 9%;
        height: 9%;
        background-color: #000;
        margin: 1% 1%;
        position: relative;
}

＆＃13;

<div id="box"></div>

＆＃13;

Answer 2

更新：在再次阅读你的问题并查看提供的代码后，你实际面临的问题是div强迫身体变得超过100％。

这是因为作为其父级的第一个元素的非浮动块元素（div，h1等）强制其边缘超出父级边界。在div中使用H1标签时常见的情况是强制它们的上边距位于包装div之外。这称为折叠边距，详细解释和解决方法可在此处找到：Collapsing Margins

基本上floated，display:block会解决问题，或者使用position:relative;以及top:1em;left:1em;

原始回答：

当你有一个具有设定高度和/或宽度的div（如你的例子中的情况）并且你在其中放置大于div的文本，图像或其他元素时，将发生溢出。因此解决方案是：

在div中添加更少的内容
不要设定高度/宽度
使用overflow:hidden;，overflow:auto;或overflow:scroll;来强制滚动栏行为。

Answer 3

这是你给margin: 1% 1%;的。只需删除它。然后它将解决您的问题。

* {
            padding: 0px;
            margin: 0px;
           box-sizing: border-box;
    }
body, html {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
}
#box {
        position: relative;
        width: 9%;
        height: 9%;
        background-color: #000;
        margin: 1% 1%;
        position: relative;

}

检查Fiddle

垂直滚动条删除

3 个答案: