html - div 下方出现空白

Question

编辑 new jsfiddle here成功复制了问题

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

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

我想去掉空格。当包含导航栏时，网页应该占据 100% 的视口(viewport)，所以当视口(viewport)改变时它应该改变，它确实是，而且大小合适，但是页面下方有一些随机的空白区域，你可以向下滚动到。空白看起来是导航栏的确切大小。我如何摆脱那个空白区域？请尝试在 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%; }

编辑 new jsfiddle here成功复制了问题

Answer 1

在CSS如果你想指定 height使用百分比的属性，您必须指定 height父容器的。所以，在你的情况下，你的 #landing-page元素有它的 parent <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 #landing-page的属性(property)元素 =).
看，如果你删除 <nav>元素，您将在顶部看到相同的白线。您似乎为 #landing-page 设置了 100% 的高度然后将其移至底部。浏览器会在 100% 的 visible 空间绘制背景，但是，正如您所注意到的，您有一些垂直滚动，并且该滚动下的所有内容都没有 background-color.

一般来说，margin关于 background-color 的地方很棘手或 background-image因为它可能会导致当前(或类似)问题。移动margin-top值 padding-top值具有相同的间距，而不是删除 calc()来自 height属性(property)，像这样:

#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; }