Question

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

我喜欢它，它涵盖了整个页面。

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

更糟糕的是，我使用的是开发人员工具，并且看到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

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

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

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

Answer 2

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

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

我调整浏览器html文档时的空白区域

2 个答案: