白色 space 出现在 div 下面

Question

EDIT new jsfiddle here 成功复制了问题

我的 div 下面出现了这个白色 space。

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

我想摆脱白色space。当包含导航栏时，网页应该占据 100% 的视口，所以它应该随着视口的变化而变化，确实如此，而且大小合适，但是下面有一些随机的白色 space您可以向下滚动到的页面。白色的 space 看起来和导航栏的大小一样。我如何摆脱那个白色 space？请尝试 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 和 body 高度设置为 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 属性 of #landing-page element =).
看，如果你删除 <nav> 元素，你会在顶部看到相同的白线。您似乎将 #landing-page 的高度设置为 100%，然后将其移至底部。浏览器比 visible space 的 100% 绘制背景，但是，正如您所注意到的，您有一些垂直滚动，并且该滚动下的所有内容都没有 背景色.

一般来说，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 上设置背景颜色将解决您的问题。

白色 space 出现在 div 下面

white space appearing below div

html

css

twitter-bootstrap-4