web-dev-qa-db-fra.com

Comment garder le pied de page au bas même avec le site Web dynamique de hauteur

Comment garder un div de pied de page toujours au bas de la fenêtre quand une page définit dynamiquement la hauteur (obtenir des informations de la base de données, par exemple) avec CSS?

Si vous voulez faire avec jQuery, je suis venu avec cela et fonctionne bien:

Définissez le CSS de votre pied de page: 

#footer { position:absolute; width:100%; height:100px; }

Définir le script: 

<script>
  x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
  y = $(window).height();    
  if (x+100<=y){ // 100 is the height of your footer
    $('#footer').css('top', y-100+'px');// again 100 is the height of your footer
    $('#footer').css('display', 'block');
  }else{
    $('#footer').css('top', x+'px');
    $('#footer').css('display', 'block');
  }
</script>

Ce script doit être à la fin de votre code;

jquerycsshtmlfooter
17
Rafael Fonseca

Je crois que vous cherchez un pied collant

Essayez ceci: http://ryanfait.com/sticky-footer/

De l'article ci-dessus:

layout.css:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .Push {
    height: 142px; /* .Push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

La page html:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="Push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
27
agarcian

Je pense que cela résoudra tous vos problèmes:

    <script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
 </script>

Vous avez besoin d'au moins un élément avec un #footer

Si vous ne voulez pas que la barre de défilement si le contenu s’adapte à l’écran changez simplement la valeur de 10 à 0 La barre de défilement apparaîtra si le contenu ne correspond pas à l’écran.

33
HenryW

Ma solution jQuery/CSS préférée pour un pied collant (non fixé) est la suivante:

CSS:

html {
    position: relative;
    min-height: 100%;
}
footer {
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
}

jQuery:

function footerAlign() {
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);
}


$(document).ready(function(){
  footerAlign();
});

$( window ).resize(function() {
  footerAlign();
});

DEMO:http://codepen.io/anon/pen/ZQxQoR

Remarque: votre pied de page doit commencer par <footer> et se terminer par </footer> pour pouvoir utiliser ce code tel quel, ou vous pouvez le modifier pour qu'il corresponde à son id/classe.

16
Nikita 웃

Voici une solution simple

CSS:

.footer_wrapper {  width:100%;     background-color:#646464; }
.footer_wrapper.fixed {position:fixed; bottom:0px;}

JS:

if ($(".Page").height()<$(window).height()){
        $(".footer_wrapper").addClass("fixed");
    }else{
        $(".footer_wrapper").removeClass("fixed");
    }

HTML:

<div class="Page"> 

        /* PAGE CONTENT */

        <div class="footer_wrapper" >

            /* FOOTER CONTENT */

        </div>
    </div>
9
orenl

Utilisez ce qui suit pour créer un pied de page fixe sur votre page Web:

CSS: 

body, html
{
    margin: 0px; padding: 0px;
}

#footer
{
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /*text-align, background-color, and other specific styles can be applied here. You can change the height from 30px to anything which suits your needs. You can even comment Left: 0px & Right: 0px, but to make sure that it works in all browsers, lets leave them there.*/
}

HTML: 

/*Place this div anywhere on the page, inside the form tags.*/
<div id="footer">
/*Your text/elements goes here*/
</div>

J'espère que cela t'aides!

À votre santé,

Veno

4
Ali Haider
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

voir l'échantillon de travail,

http://jsfiddle.net/RC3YX/

3
Chamika Sandamal

Je vérifiais cette question pour trouver la même réponse. Cela a été demandé à un moment donné et c'est peut-être une nouvelle fonctionnalité ajoutée par jQuery. Mais ceci est une solution simple qui existe maintenant:

Ajoutez simplement data-position = "fixed" à la balise div si vous utilisez jQuery.

http://demos.jquerymobile.com/1.2.0/docs/toolbars/bars-fixed.html

<div data-role="footer" data-position="fixed">
        <h5>footer - page 3</h5>
        </div><!-- /footer -->

J'espère que cela t'aides.

0
javaJavaJava

Je ne sais pas si c'est ce que vous cherchez:

<div style="position: fixed; bottom: 0px; left: 0px; right: 0px;">footer</div>
0
Geoffrey

Voir ces deux articles. http://ryanfait.com/sticky-footer/ et http://css-tricks.com/snippets/css/fixed-footer/

0
Maheep