将填充添加到正文时，div被推出屏幕[重复]答案

【问题标题】：div getting pushed out of screen when padding is added to body [duplicate]将填充添加到正文时，div被推出屏幕[重复]
【发布时间】：2021-05-03 23:24:46
【问题描述】：

我正在尝试将 div 居中在一个窗口中，并在 html 中填充 10px。每当我将填充添加到主体时，div 就会被推出窗口并出现滚动条。

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
            <div id="div"></div>
        -->
    </body>
</html>

CSS 代码

html {
    margin:0px;
    height:100%;
    width:100%;
}

body {
    margin:0px;
    height:100%;
    width:100%;
    padding:10px;
    background-color:#23272A;
}

#div {
    height: 100%;
    width: 100%;
    background-color:red;
}

div 在下面的照片中显示为红色。它不在窗口中居中，滚动时会出现滚动条。 div 延伸到窗口之外。

非常感谢所有帮助！

【问题讨论】：

抱歉，回答迟了。我添加了一些额外的解释。我希望这可能会有所帮助?????????
@Subro 这一切都很好，我很感激！！
我喜欢!!????????

标签： html css electron

【解决方案1】：

@Joe 的答案可能更好，但您可以使用calc() 函数来实现它：

#div {
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  background-color: red;
}

它从宽度和高度中减去 2 倍的边框大小以适应容器。

【讨论】：

【解决方案2】：

这与盒子模型有关。填充占用空间，因此它变得比容器大。

如果您希望它填充但保持在边界内，这意味着它的宽度包括边框和填充而不是宽度加上边框加上填充然后使用它。我总是将它与边距和填充重置一起放在我的 CSS 顶部

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

如果您还不知道 * 是一个全选择器。一切都受到影响。你也可以把它放在有问题的元素或其父元素上，我不记得了，认为它是孩子本身。你可以阅读它here

还有一点需要注意，对于不重复的 CSS，更简洁一些，可以使用逗号为不同的元素添加相同的属性和值，例如：

* {
   margin: 0;
   padding:0;
   box-sizing: border-box;
}

html,
body,
#div {
   width:100%;
   height:100%
}

body {
    padding:10px;
    background-color:#23272A;
}

#div {
    background-color:red;
}

这样你就不必在不同的元素上输入相同的东西，而且阅读 imo 更干净

【讨论】：

谢谢！我在#div 上使用box-sizing: border-box;。也感谢您的解释，因为我是 html 新手。

【解决方案3】：

抱歉回复晚了！！！

您可以看到滚动条，因为您在 body 元素中添加了 20px 额外（顶部 10px + 底部 10px）的内边距。您可以通过在 body 元素中添加 box-sizing: border-box; 来移除滚动条。但我们建议您使用通用选择器将此属性添加到所有元素。

一些注意事项：默认情况下，所有元素的高度都是自动的。如果我们将 HTML 元素高度设置为 100%，它将设置画布的高度，因为 HTML 没有父元素。在我看来，大多数人不给 html 元素高度，而是给 body 元素高度（100vh）。他们这样做的原因是因为我们知道 CSS 中每个元素的高度都是自动的。如果我们将子元素的高度设置为 100vh，那么父元素的高度会自动设置为 100vh。

现在，如果我们将 100% 的高度赋予 div 元素，那么 div 高度将为 100vh，因为它将采用父元素的高度，即 body 元素，即 100vh。

如果我想实现你的情况，我会这样做。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0px;
  height: 100vh;
  padding: 10px;
  background-color: #23272A;
}

#div {
  height: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" href="styles.css">
</head>

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

</html>

【讨论】：