当我调整浏览器 html 文档的大小时有空格

Question

我正在使用引导程序创建一个简单的网页，这里有网页在全桌面宽度时

的照片

https://i.stack.imgur.com/acTR5.jpg

正如我喜欢的那样，它涵盖了整个页面。

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

https://i.stack.imgur.com/z8uNW.jpg

更糟糕的是，我做开发人员工具，看到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%添加到您的 css 代码中以进行html, body，然后为元素section添加height: 100%; box-sizing: border-box;。

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

Answer 2

尝试将其添加到您的 CSS 中：

html, body{
    width:100%;
    height:100%
}

这会拉伸页面以填充整个页面的宽度和高度