Html 背景图像无法与粘性页脚配合使用

因此，在我当前的HTML和CSS设置中，我的内容的背景图像会因页脚而中断，这并不是我想要的。案例和要点：

我的HTML:

<div class="container">
    <header>
        <h1 id="title">Dropping Hike</h1>
        <ul id="nav">
            <li><a class="nav-link" id="active" href="#">Home<div class="nav-underline"></div></a></li>
            <li><a class="nav-link" href="aanmelden.html">Aanmelden<div class="nav-underline"></div></a></li>
            <li><a class="nav-link" href="deelnemers.html">Deelnemers<div class="nav-underline"></div></a></li>
            <li><a class="nav-link" href="gallerij.html">Gallerij<div class="nav-underline"></div></a></li>
            <li><a class="nav-link" href="contact.html">Contact<div class="nav-underline"></div></a></li>
            <li><a class="nav-link" href="faq.html">FAQ<div class="nav-underline"></div></a></li>
        </ul>
    </header>

    <div class="row">
        <h3 class="section">Welkom</h3>
        <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono. Negat esse eam, inquit, propter se expetendam. Post enim Chrysippum eum non sane est disputatum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Duo Reges: constructio interrete. Nam quid possumus facere melius? Hoc non est positum in nostra actione. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Duarum enim vitarum nobis erunt instituta capienda. An hoc usque quaque, aliter in vita? Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Hoc loco tenere se Triarius non potuit. Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Ita graviter et severe voluptatem secrevit a bono. Eademne, quae restincta siti? Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Equidem e Cn.</p>
    </div>

    <div class="row">
        <h3 class="section">Thema</h3>
        <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono. Negat esse eam, inquit, propter se expetendam. Post enim Chrysippum eum non sane est disputatum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Duo Reges: constructio interrete. Nam quid possumus facere melius? Hoc non est positum in nostra actione. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Duarum enim vitarum nobis erunt instituta capienda. An hoc usque quaque, aliter in vita? Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Hoc loco tenere se Triarius non potuit. Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Ita graviter et severe voluptatem secrevit a bono. Eademne, quae restincta siti? Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Equidem e Cn.</p>
    </div>

    <div class="row">
        <div class="one-third column">
            <h5 class="section"><span class="fa-stack"><i style="color:#1e824c" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-bullseye fa-stack-1x fa-inverse"></i></span> Uitdagend</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono.</p>
        </div>
        <div class="one-third column">
            <h5 class="section"><span class="fa-stack"><i style="color:#1e824c" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-beer fa-stack-1x fa-inverse"></i></span> Gezellig</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono.</p>
        </div>
        <div class="one-third column">
            <h5 class="section"><span class="fa-stack"><i style="color:#1e824c" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag-checkered fa-stack-1x fa-inverse"></i></span> Competitief</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono.</p>
        </div>
    </div>
</div>

<footer class="u-full-width"> <!-- Footer -->
    <div class="container">
        <hr>
        <p style="text-align: center">© 2016 Dropping Hike. Alle rechten voorbehouden.</p>
    </div>
</footer>

    html {
    position: relative;
    min-height: 100%;
}
body {
    background-image: url(../images/boom-schors-texture.jpg);
    background-attachment: fixed;
    font-family: 'Roboto Slab', serif;
    margin-bottom: 100px;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}
.container {
    padding-left: 35px;
    padding-right: 35px;
    background: url(../images/white_wall_hash.png);
    min-height: 100%;
}
a {
  color: #1e824c; }
a:hover { 
  color: #a3c338; }
p {
    text-align: justify;  }
.section {
  text-transform: uppercase;
  font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #1e824c;}
.underline {
  border-width: 0;
  width: 64px;
  border-bottom: 2px solid #1e824c;  }
.nav-underline {
  width:0;
  height:2px;
  background:#1e824c;
  transition:width 0.5s;
  -webkit-transition:width 0.5s;  }
a.nav-link:hover > .nav-underline {
  width:100%;  }
a.nav-link#active > .nav-underline {
  width:100%;  }
a.nav-link:hover {
  color: #000;  }
a.nav-link { 
  color: #222;
  text-decoration: none;
  text-transform: uppercase;  
  font-weight: 400;
  margin-top: 0;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -.05rem;  }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  background-color: #fff;
  border-color: #1e824c;
  color: #000; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #fff;
  border-color: #1e824c;
  background-color: #1e824c; }
input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #1e824c;
  outline: 0; }
#nav {
    font-family: 'Montserrat', sans-serif;
  text-align: justify;
  margin-top: 3rem;  }
#nav:after {
  content: '';
  display: inline-block;
  width: 100%;  }
#nav li {
  display: inline-block;
}
#title {
  text-transform: uppercase;
    color: #1e824c;
  font-weight: 700;
    font-family: 'Montserrat', sans-serif;}
header {
    padding-top: 25px;
}
hr {
    border-width: 0;
    width: 90%;
    border-bottom: 4px solid #1e824c;  }

---

如有任何想法或建议，将不胜感激！：）

您可以从页脚的hr中删除默认的上边距：

hr {
  margin-top: 0;
}

当前，默认的hr将整个页脚向下推到其应位于的位置下方

如果要在较长的页面上保留内容和页脚之间的空间，可以在主容器和页脚之间添加一个

：

编辑： 要使主要内容达到完整高度，而不是将页脚推到底部，请执行以下操作：

html {
    height: 100%;
}
body {
    min-height: 100%;
    margin-bottom: 0;
}
.container {
    min-height: 100%;
}

---

感谢您的回复，它似乎解决了页面上有足够内容垂直覆盖页面的问题，但对于内容很少的页面，我仍然被这个巨大的差距所困扰：您的意思是您不想让它进入底部，而只是停留在内容下方30像素？在本例中，您可以执行

footer{position:static；margin top:30px；}

No，这很好。我希望白色背景垂直覆盖整个页面，但是，我不希望有一个突破，但我不知道如何实现这一点。嗯，我希望页脚都粘在底部，同时使内容达到完整高度。使用建议的编辑，它在内容稍多的页面上不起作用，请参见：嗯，是的。。您可以更改：

.container{min height:100%；}

并使页脚不是绝对的，以实现此操作：

页脚{position:static；}

但是，您将在较小的页面上设置全高内容框，并且页脚将位于折叠下方。另一个选项是将页脚包含在主容器中，使其成为绝对值，并为主容器提供100px的底部填充。