Question

通常粘性页脚对我来说不是问题，但今天它有点令人沮丧。我在这里尝试了各种资源以及只是搜索，我无法弄清楚我的页脚有什么问题。如果有人能帮我解决这个问题，我将非常感激！谢谢！

html {
  height: 100%;
}

body {
  background: url('footer_lodyas.png') fixed;
  font-family: 'Sahitya', serif;
  max-width: 100%;
  margin: 0 auto 0 auto;
  overflow-x: hidden;
  height: 100%;
}

.all {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto;
}

#footer_links {
  position: relative;
  width: 100%;
  text-align: center;
  background: #1FA0A3;
  font-size: 16px;
  font-size: 1.6rem;
  border-top: none;
  padding: 20px;
}

<body>
  <div class="all">
    <div class="wrapall">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
        venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
        id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
        diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
        tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
        suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
        luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
        pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
        et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
        commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
        vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
        Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
        arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
        vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
      </p>
      <div id="footer_links"></div>
    </div>
  </div>
</body>

Answer 1

您可以使用display: flex;来获得粘性页脚。我看不到在您的代码中获取粘性页脚的任何努力。

.wrapall {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapall p {
  flex: 1;
}

html {
  height: 100%;
}

body {
  background: url('footer_lodyas.png') fixed;
  font-family: 'Sahitya', serif;
  max-width: 100%;
  margin: 0 auto 0 auto;
  overflow-x: hidden;
  height: 100%;
}

.all {
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
}

.wrapall {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapall p {
  flex: 1;
}

#footer_links {
  position: relative;
  width: 100%;
  text-align: center;
  background: #1FA0A3;
  font-size: 16px;
  font-size: 1.6rem;
  border-top: none;
  padding: 20px;
}

<body>
  <div class="all">
    <div class="wrapall">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
        venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
        id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
        diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
        tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
        suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
        luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
        pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
        et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
        commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
        vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
        Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
        arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
        vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.


      </p>




      <div id="footer_links">

      </div>
    </div>

  </div>
</body>

Answer 2

尝试将您的页脚div放在.all和.wrapall之外。像这样：https://jsfiddle.net/fb3uno9s/

html {
    height:100%;
}

body{
    background: url('footer_lodyas.png')  fixed ;
    font-family: 'Sahitya', serif;

    max-width:100%;
    margin: 0 auto 0 auto;

    overflow-x: hidden;
    height: 100%;

    }


  .all{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;

}


#footer_links {
  position: relative;
  width: 100%;
  text-align: center;
  background: #1FA0A3;
  font-size: 16px;
  font-size: 1.6rem; 
  border-top: none;
  padding:20px; 
}

<div class="all">
<div class="wrapall">
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta.

Integer semper condimentum tellus ac accumsan. Integer scelerisque, diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus.

Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis.

Vestibulum tristique magna ac lobortis pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl.

Proin eleifend ac lacus sed venenatis. Vivamus pulvinar commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.

Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.


</p>
</div>
</div>


<div id="footer_links"></div>

Answer 3

试试这个：使用vh - 视口高度

.wrapall {
    height: 100vh;
    position: relative;
}

#footer_links {
    background: #1fa0a3 none repeat scroll 0 0;
    border-top: medium none;
    bottom: 0;
    font-size: 1.6rem;
    padding: 20px;
    position: absolute;
    text-align: center;
    width: 100%;
}

粘性页脚 - 页脚不会停留

3 个答案: