如何消除内容下的空间？ [复制]答案

【问题标题】：How to eliminate the space under the content? [duplicate]如何消除内容下的空间？ [复制]
【发布时间】：2019-05-16 21:50:02
【问题描述】：

我想创建一个容器元素，它至少是页面的高度。我是这样设置的：min-height: 100vh

正文没有边距。

由于某种原因，元素下方出现了一个空白区域。怎么可能消除呢？

我可以在 Chrome 和 Edge 中观察到此错误，但在 Firefox 中却没有。

我的代码：

body {
  margin: 0;
  background: red;
}

.container {
  margin: auto;
  max-width: 200px;
  background: gray;
  min-height: 100vh;
  box-sizing: border-box;
}

.item {
  background: white;
  margin-bottom: 1em;
  height: 100px;
}

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

看起来是这样的：

【问题讨论】：

在容器上添加一些内边距 (1px) ，由于某些原因，项目上的边距底部跳到容器外jsfiddle.net/z8tg1746 或删除最后一个项目上的边距jsfiddle.net/ahm9yqoL
你看到的原因是因为高度 100%，100% 并不总是按预期工作，你必须使用 JavaScript 作为你的高度，或者组合显示类型为高度弯曲
关于跳出的边距：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/… 父母和第一个/最后一个孩子 If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
@G-Cyr 又一个奇怪的边距崩溃案例：stackoverflow.com/q/48777787/8620333
重复的问题比这个更通用。答案解释了为什么 FF 和 Chrome 的行为不同，您还将找到规范的相关部分来描述所有这些

标签： html css

【解决方案1】：

您可以通过删除最后一个 .item 元素的边距来使其工作。

body {
  margin: 0;
  background: red;
}

.container {
  margin: auto;
  max-width: 200px;
  background: gray;
  min-height: 100vh;
  box-sizing: border-box;
}

.item {
  background: white;
  margin-bottom: 1em;
  height: 100px;
}
.item:last-child { 
  margin:0;
}

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

【讨论】：

问题不是页边距，而是页边距后面的多余空间
@ImmortalDude，同意！您使用 flexbox 的解决方案是正确的方法。
@ImmortalDude 边距似乎是 BUG developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/… .. 同意它不应该在这里发生，但它确实发生并且删除它可以解决问题
@G-Cyr 一个简单的重置应用于 html 和 body 元素也解决了这个问题，不需要从元素中删除边距

【解决方案2】：

问题是由.container 边距以auto 居中而.item 子级具有底部边距引起的。由于某种原因导致没有折叠，这反过来又导致边距溢出（或附加到）它的所有者，即使margin-bottom: 0 应用于.container。

为了解决这个问题，我们提出了一种不同的方法，即不使用margin: auto;，将.container 居中。

此外，通过设置溢出的罪魁祸首与其父级之间的高度关系来强制折叠。我们将通过将height: 100%; 设置为html, body 来完成此操作。

我将提出三个解决显示差异的解决方案。

选项 1

编辑：在进一步测试后，此解决方案在 Edge 中似乎与我不一致。有时我必须打开 DevTools 并在 .container 中切换 min-height: 100vh; 才能正确渲染。

html, body {
  height: 100%;
}

.container {
  /* Remove the margin */
  /* margin: auto; */
  position: relative;
  left: 50%;
  transform: translateX(-50%);

这解决了 Edge 和 Chrome 中的问题。要回答这个问题，这是唯一需要的编辑。

jsFiddle

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: red;
}

.container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  min-height: 100vh;
  max-width: 200px;
  background: grey;
}

.item {  
  position: relative;
  margin-bottom: 1em;
  height: 100px;
  background: white;
}

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

选项 2

此方法是对.item margin 的应用方式的轻微修改，我们将应用于所有.item，除了最后一个使用:not(last-child) 的方法。

jsFiddle

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: red;
}

.container {
  margin: auto;
  min-height: 100vh;
  max-width: 200px;
  background: grey;
}

.item {  
  position: relative;      
  height: 100px;
  background: white;
}

.item:not(:last-child) {
  margin-bottom: 1em;
}

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

选项 3

如果您熟悉 Flexbox，则可以通过对 CSS 进行以下编辑来解决它：

body {
  margin: 0;
  background: red;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container {
  /* Without a min height set the width 
  /*   will default to the content's width */
  /* max-width: 200px; */
  width: 200px;
  
  margin: auto;
  background: gray;
  min-height: 100vh;
  box-sizing: border-box;
}

.item {  
  position: relative;
  margin-bottom: 1em;
  height: 100px;
  background: white;
}

<body>
<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
</body>

这里，我们将body设置为flexbox，设置为column方向，并将内容居中（直接子级）。

重要的是，我们必须设置一个最小宽度，这样如果我们的内容小于200px，它就不会被压扁。

【讨论】：

你检查了吗？
是的，我查过了。
所以在你的答案中添加一个演示。 jsfiddle.net/ahm9yqoL/1 和最终解释 ;) 但保持 min-height ，它将是进入该容器的内容 ;)
@G-Cyr 我更新了我的答案以显示我用来帮助确定答案的示例 html 文件。
flex 不存在，是吗？并且身体仍然高达100％。你知道为什么 flex 会很好用吗？ .这是关于触发块格式化上下文

【解决方案3】：

您可以在容器上设置height: 100%，使其始终为页面的高度。

【讨论】：

这可能并不总是给出预期的结果

【解决方案4】：

以下修改后的代码应该对您有所帮助。在html 和body 元素中设置margin: 0

html, body { /* or use * to apply this margin reset to all elements */
  margin :0;
}

body{
  background: red;
}

.container {
  margin: auto;
  max-width: 200px;
  background: gray;
  
  height:100vh;
  box-sizing: border-box;
}

.item {
  background: white;
  margin-bottom: 1em;
  height: 100px;
}

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

【讨论】：

??容器应该在最低 100vh 高度显示背景直到底部。现在没有了
@G-Cyr 更新了答案，因为我误解了问题所在
操作已经将 margin:0 设置为 body ，他在容器外有 1em 额外的 chrome 和 edge ，只有当最后一个项目到达容器底部时才会发生这种情况。如果没有设置边框、填充或块格式上下文，则垂直边距显示在容器外部。这里的问题是，即使最后一项下方的 .container 中有超过 1em 的可用空间，也会发生这种情况。
不只是正文，还有 html，这就是我的浏览器“chrome 74”上解决问题的原因，该操作也没有在 html 中包含边距 0
@G-Cyr，如果我有任何发现，我会回复你

【解决方案5】：

您可以尝试在 .item 中添加一些填充

【讨论】：

这个答案根本没有帮助 1）不包含任何代码 2）填充与问题无关，它是解释高度的方式，但有问题的浏览器
填充与折叠边距有关。但同意，这不是答案，而是评论
对不起，我的意思是评论而不是发布答案，但谢谢