Question

我有一个简单的div包装器，里面有四个跨距。

<body>
  <main>
    <div>
      <span>One</span>
      <span>Two</span>
      <span>Three</span>
      <span>Four</span>
    </div>
  </main>
</body>

div绝对定位，以便我可以触摸屏幕底部，文本对齐是合理的，因此内部的跨距均匀分布。这个工作正常，直到我尝试使我的跨度高度：100％，然后在最底部的实际流量之外出现一个神秘的白色空间。我认为这与我的div有关：在psudo-element之后，我完全不知道发生了什么。

* {
  padding: 0;
  margin: 0;
}

main {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: rgb(45, 45, 65);
  text-align: center;
}

div {
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  bottom: 0;
  text-align: justify;
  display: block;
}

div:after {
  display: inline-block;
  width: 100%;
  content: '';
}

span {
  background-color: rgb(25, 25, 45);
  box-sizing: border-box;
  display: inline-block;
  font-size: 1em;
  padding: 10px;
  height: 100%;
}

span:hover {
  background-color: white;
}

我不明白：工作之后，还是某种故障？世界上哪个地方的白色间距来自底部？

这是问题的复制品：http://codepen.io/anon/pen/qdpERR?editors=110

Answer 1

只需向overflow: hidden;添加main，甚至main的父级也可以。

检查链接 http://codepen.io/TibicenasDesign/pen/yNpyLr?editors=110

取消注释overflow: hidden;或box-sizing: border-box然后，网页末尾的空白区域将被删除。

此外，盒子尺寸也适用！我一直都有边框，所以忘记了哈哈，也许是一个更好的解决方案

Answer 2

另一个选项可能是添加box-sizing:border-box，因为你在这些链接元素上有填充。

HTML流程之外的神秘白色空间？

2 个答案: