div下方出现空白

Question

EDIT new jsfiddle here 成功复制了问题

我的 div 下方出现了这个空白。

此处显示为 2 张照片，其中一张向下滚动：

我想去掉空格。包含导航栏时，网页应该占据 100% 的视口，因此当视口发生变化时它应该会发生变化，而且确实如此，而且大小合适，但是页面下方有一些随机空白可以向下滚动到。空白看起来是导航栏的确切大小。我如何摆脱那个空白？请尝试the jsfiddle

代码：

<nav class="navbar navbar-dark navbar-fixed-top">
    <div class="container-fluid">
        <button     class="navbar-toggler hidden-md-up pull-xs-right" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#nav-content">
                    &#9776;
        </button>
        <a class="navbar-brand" href="#">THE VEGAN REPOSITORY</a>
        <div class="collapse navbar-toggleable-sm" id="nav-content">
            <ul class="nav navbar-nav pull-xs-right">
                <li class="nav-item">
                    <a class="nav-link" href="#">FIND</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ADD</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">LOGIN</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">SIGN UP FREE</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div id="landing-page" class="text-uppercase">
    <div class="container-fluid" style="height: 100%;">
        <div class="row hidden-lg-up" style="height: 20%;">
            <div class="col-xs-3 flex-xs-middle">
                <img width="100" src="images/monster2.png" />
            </div>
            <div class="col-xs-3 offset-xs-6 flex-xs-middle">
                <img class="pull-xs-right" width="100" src="images/monster4.png" />
            </div>
        </div>
        <div class="row" id="middle-row">
            <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top 
                flex-sm-middle">
                <img width="80%" src="images/monster2.png" />
            </div>
            <div class="col-md-12 col-lg-6 flex-xs-middle ">
                <div style="text-align: center;">
                    <h5 class="display-6">the vegan repository</h5>
                    <h1 class="display-3">
                        find vegan stuff* near you.
                    </h1>
                                        <a id="try-now-button" class="with-border clickable" href="#search-filter-page">
                        <h5 class="text-center medium-text">try now</h5>
                    </a>
                </div>
            </div>
            <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down 
                flex-xs-top flex-sm-middle">
                <img class="pull-xs-right" width="80%" src="images/monster4.png" />
            </div>
        </div>
        <div class="row" style="height:5%;">
            <h4 class="display-6 flex-xs-bottom">
                *Stuff like restaurants, meat alternatives, 
                dairy alternatives, and much more!
            </h4>
        </div>
    </div>
</div>

css:

#landing-page {
  background-color: dimgray;
  height: calc(100% - 50px);
  margin-top: 50px;
  overflow-y: auto;
  padding: 10px 40px 10px 40px;
  min-height: 396px; }

h1 {
  font-size: 10vmin;
  color: #FFF; }

h5 {
  color: rgba(255, 255, 255, 0.7); }

h4 {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7); }

/* MORE THAN 75 (XL) */
#middle-row {
  height: 95%; }

/* LESS THAN 75 (LG) */
@media (max-width: 74.9em) {
  #middle-row {
    height: 95%; } }
/* LESS THAN 62 (MD) */
@media (max-width: 61.9em) {
  #middle-row {
    height: 75%; } }
/* LESS THAN 48 (SM) */
@media (max-width: 47.9em) {
  #middle-row {
    height: 75%; } }
/* LESS THAN 34 (XS) */
@media (max-width: 33.9em) {
  #middle-row {
    height: 75%; } }

.navbar-toggler {
  color: rgba(255, 255, 255, 0.7); }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7); }

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #FFF; }

nav {
  background-color: #fc4747; }


  html, body {
  height: 100%; }

EDIT new jsfiddle here 成功复制了问题

Answer 1

在jsfiddle中我们看不到空格，所以问题可能来自html/body标签。 如果无论你调整多少它们总是在 1155 像素，请尝试将 html 和正文高度设置为 100%：

html, body { height: 100%; }

Answer 2

在CSS 中，如果您想使用百分比指定height 属性，您必须 指定父容器的height。所以，在你的情况下，你的 #landing-page 元素有它的父 <body> 标签，而 <body> 标签有它的父 <html> 标签。这就是为什么您必须声明：

html, body { height: 100%; }

在你的 CSS 中。

这里是另一个问题：

<div class="row hidden-lg-up" style="height:20%;">
    ...
</div>
<div class="row" style="height:95%;">
    ...
</div>
<div class="row" style="height:5%;">
    ...
</div>

尝试对所有高度求和 =) 改变它，这样它们总和会达到 100%，你会得到你想要的

---

更新

我已设法在本地重现您的问题，因此这是解决方案。
实际上，您的问题不是底部的白线，而底部的主要罪魁祸首是margin-top 元素的margin-top 属性=)。
看，如果您删除 <nav> 元素，您将在顶部看到相同的白线。您似乎为 #landing-page 设置了 100% 的高度，然后将其移至底部。浏览器在 visible 空间的 100% 处绘制背景，但是，正如您所注意到的，您有一些垂直滚动，并且该滚动下方的所有内容都没有 background-color.

一般来说，margin 与 background-color 或 background-image 相比是棘手的，因为它可能会导致当前（或类似）问题。将margin-top 值移动到padding-top 值以具有相同的间距，而不是从height 属性中删除calc()，如下所示：

#landing-page {
  background-color: dimgray;
  height: 100%; /* just 100% */
  overflow-y: auto;
  padding: 60px 40px 10px 40px; /* added margin-top to padding-top */
  min-height: 396px; }

Answer 3

在body 上设置背景颜色而不是div，将解决您的问题。