Question

我想创建一个conainer元素，该元素至少是页面的高度。我将其设置为：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>

它是这样的：

Answer 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>

Answer 2

此问题是由于.container边距以auto为中心，而.item子元素的底部边距居中。由于某种原因，即使没有将margin-bottom: 0应用于.container，也会导致缺乏折叠，从而导致页边空白溢出（或追加到其所有者）。

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

此外，通过设置溢出元凶与其父级之间的高度关系来强制崩溃。我们将height: 100%;设置为html, body。

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

选项1

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

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，它将不会被压缩。

Answer 3

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

Answer 4

以下修改后的代码将为您提供帮助。在margin: 0和html元素中设置body

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>

Answer 5

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

如何消除内容下的空间？

5 个答案: