html - 调整浏览器 html 文档大小时的空白

Question

我正在使用 bootstrap 创建一个简单的网页，这里有全桌面宽度时网页的照片

http://imgur.com/a/QcC18

如我所愿，它覆盖了整个页面。

但是当我将 Chrome 调整到更小的宽度时，底部有一些空白，我不知道为什么？

http://imgur.com/a/TuXdH

更糟糕的是，我做开发者工具，看到 html 只覆盖了我的 div，为什么还有额外的空间？

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* SECTIONS */

section {
  padding-top: 2%;
  padding-bottom: 2%;
}
.main {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
  /* bottom, image */
  url(img/background.jpg);
  background-size: cover;
  padding-bottom: 56.25%;
  background-attachment: fixed;
}
.no-padding {
  padding: 0;
}
/* HEADINGS */

.welcome-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
}
.welcome-area h1 {
  font-size: 500%;
}

<section class="main">
  <div class="welcome-area">
    <h1>Hello.</h1>
    <div class="row text-center btn-main">
      <button type="button" class="btn btn-primary btn-explore">EXPLORE</button>

    </div>
    <div class="row">
      <img src="css/img/face.jpg" alt="face" class="img-responsive img-face">
    </div>



  </div>
</section>

Answer 1

请将 height: 100% 添加到您的 html, body 的 css 代码中，然后添加 height: 100%; box-sizing: border-box; 用于元素 section。

编辑:为了获得更好的效果，您可以删除 .main 元素的 padding-bottom。