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

Question

I have a simple div wrapper with four spans inside. 我有一个简单的div包装器，里面有四个跨度。

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

The div is positioned absolutely so that I can get it to touch the bottom of the screen, and text-align is justify so the spans inside are evenly spaced. div绝对定位，以便我可以触摸屏幕的底部，文本对齐是合理的，因此内部的跨距均匀分布。 This works fine until I try to make my spans height: 100%, then a mysterious white space appears outside of the actual flow on the very bottom. 这个工作正常，直到我尝试使我的跨度高度：100％，然后在最底部的实际流量之外出现一个神秘的白色空间。 I think this has something to do with my div:after psudo-element but I have absolutely no idea what's going on. 我认为这与我的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;
}

Do I not understand how :after works, or is this some kind of a glitch? 难道我不明白：在工作之后，或者这是一种什么样的故障？ Where in the world is that white spacing coming from on the bottom? 世界上哪个地方的白色间距来自底部？

Here's a reproduction of the problem: http://codepen.io/anon/pen/qdpERR?editors=110 这是问题的再现： http ： //codepen.io/anon/pen/qdpERR？editors = 110

Answer 1

simply add an overflow: hidden; 只需添加一个overflow: hidden; to the main or even the parent of the main should works. 在main的，甚至家长main应的作品。

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

Uncomment overflow: hidden; 取消注释overflow: hidden; or box-sizing: border-box then, the white space at the end of the web will be removed. 或box-sizing: border-box然后，将删除网页末尾的空白区域。

Also the box-sizing works ! 盒子大小也有效！ i always have it with border-box so forgot it haha, and maybe its a better solution 我一直都有边框，所以忘了哈哈，也许是一个更好的解决方案

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2015-06-26 07:36:12

解决方案2
0 2015-06-26 07:41:04

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2015-06-26 07:36:12

解决方案2 0 2015-06-26 07:41:04

解决方案1
4 已采纳 2015-06-26 07:36:12

解决方案2
0 2015-06-26 07:41:04