Pieds de page collants CSS avec hauteur inconnue

Question

Existe-t-il un moyen de coller un pied de page au bas de l'écran du navigateur ou juste après le contenu (selon ce qui est le plus long) à l'aide de CSS ? sin connaître à l'avance la taille du pied de page ?

Pour l'instant, j'utilise le positionnement absolu dans un conteneur qui contient le pied de page et le contenu avec une hauteur minimale du conteneur de 100 %, mais si je modifie le pied de page, je constate que je dois modifier le rembourrage au bas du conteneur pour qu'il corresponde à sa hauteur.

Answer 1

Je pense que la meilleure façon est d'ajouter une classe à votre pied de page. Javascript fera le reste.

//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
    var footerHeight = $('footer.fixed_footer').height();
    if($('footer').hasClass('fixed_footer')){
        $( "section" ).last().css({
            "margin-bottom": footerHeight + 'px'
        });
    }

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
  margin: 0;
  padding: 0;
  text-align:center;
  font-family: 'Raleway', sans-serif;
  line-height: 30px;
}
section{
  padding-top: 80px;
  padding-bottom: 80px;
  border-bottom:1px solid #ddd;
  background: #ffffff;
  z-index: 9;
}
h1{
  font-size: 48px;
  font-weight: 800;
  text-transform: capitalize;
}
a{
  text-decoration: none;
}
.container{
  width: 700px;
  display: inline-block;
  box-sizing:border-box;
  padding-left: 30px;
  padding-right: 30px;
}
.logo{
  height: 80px;
  width: 80px;
  display: inline-block;
}

.footer_top{
  border-bottom: 1px solid #777;
  padding-bottom: 60px;
}
.logo img{
  width: 100%;
  height: 100%;
}
.footer_bottom {}
.footer_bottom p{
  color:#aaa;
}
.footer_top{
  padding-top: 100px;
}
.footer_bottom p a{
  color:#158;
}
footer{
  width: 100%;
  left: 0;
  bottom:0px;
  z-index: -1;
  background: #222222;
}
.fixed_footer{
  width: 100%;
  position:fixed;
  left: 0;
  bottom:0;
  z-index: -99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="container">
    <h1>This is Banner</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is About</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Service</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Portfolio</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Banner</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>

<footer class="fixed_footer">
  <div class="container">
    <div class="footer_top">
        <a class="logo" href="portfolio.codeexposer.com">
          <img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
        </a>
    </div>
    <div class="footer_bottom">
      <p>
        All Rights Reserved By <a href="http://portfolio.codeexposer.com">Mohammad Abdus Salam</a>
      </p>
    </div>
  </div>
</footer>

Answer 2

Jetez un coup d'œil à ceci, cssstickyfooter Il fonctionne parfaitement dans tous les navigateurs.

Mise à jour : Ce document date de 2010, il n'est peut-être pas pertinent au regard des normes actuelles.