Question

编辑 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%; }

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

Answer 1

在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元素#landing-page属性。看，如果删除<nav>元素，您将在顶部看到相同的白线。您似乎为#landing-page设置了100％的高度，而不是将其移至底部。浏览器比在100％的可见空间中绘制背景，但是，正如您所注意到的，您有一些垂直滚动，并且该滚动下的所有内容都没有背景颜色

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

#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 2

在jsfiddle中我们看不到空白，所以问题可能来自html / body标签。如果他们总是在1155px，无论你调整多少，尝试将html和身高设置为100％：

html, body { height: 100%; }

Answer 3

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

div下方出现白色空间

3 个答案: