滚动正文和块后的 space

Question

我不明白为什么在正文中有一个卷轴，在.example块之后有一个space。按照我的逻辑，我把 margin-bottom 设为 100px，然后从 block height 中减去这 100px max-height: calc(100% - 100px);

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    .example {
        padding: 20px;
        width: 60%;
        margin: 100px auto 0;
        max-height: calc(100% - 100px);
        border: 1px solid black;
        overflow-y: scroll;
    }

    p{
        padding: 100vh 0;
    }
    </style>
</head>

<body>
    <div class="example">
        <div class="text">
            <p>Lorem</p>
            <p>Lorem</p>
        </div>
    </div>
</body>

</html>

Answer 1

删除 p 元素上的 padding：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    .example {
        padding: 20px;
        width: 60%;
        margin: 100px auto 0;
        max-height: calc(100% - 100px);
        border: 1px solid black;
        overflow-y: scroll;
    }

    </style>
</head>

<body>
    <div class="example">
        <div class="text">
            <p>Lorem</p>
            <p>Lorem</p>
        </div>
    </div>
</body>

</html>

Answer 2

正确答案是 Collapsing margins xD。要解决问题，您可以在正文中添加以下内容之一：

边框
填充
溢出

Answer 3

您运行陷入了 广泛继承的边距 问题，该问题源自流行的 collapsed margins - issue （当两个元素具有垂直边距时，两个碰撞边距合并为一个） - 不是您的确切情况，但本质上相同。
阅读更多关于 w3.org Collapsing Margins

由于您使用了 html, body {height: 100%} 并且高 .example 元素的上边距为 100% - 移动了 body 元素，向下折叠了 100 像素！ 它基本上“疯狂地”继承了（至少在视觉上）那些 100 像素的边距。

具有垂直边距的元素可能会导致祖先流出现不需要的结果。解决此问题的一种常见方法是巧妙地避免垂直 margin，或者在您的特定情况下将 overflow: auto 添加到受该问题 html, body 影响的祖先。

html, body {
  height: 100%;    /* Why would you want this? */
  overflow: auto;  /* FIX for wild margins */
}

其他解决方案（我相信还有很多其他解决方案）是不使用html, body {height: 100%} 而是 html 上的 min-height（如果确实需要）和 .example 元素上的 body 和 vh（视口高度）单元

html, body {
  /* min-height: 100%;  /* use min-height, but not needed */
}
.example {
  /* .... other styles */
  margin: 100px auto 0;
  height: calc(100vh - 100px); /* 100vh minus 100px margin-top */
}

长话短说 - 使用 margin 时要小心。我个人只在使用 flexbox 或水平 space 时使用它（通常在使用内联块元素时），否则我总是使用带有填充的包装器来创建所需的间距，这要归功于 box-sizing: border-box （不需要计算任何东西）-或者在真正需要的时候-我会特别小心地对待它们。

滚动正文和块后的 space

Scroll in the body and the space after the block

html

css

markup