Rendre le pied de page au bas de la page correctement

J’essaie d’avoir mon pied de page (juste une div avec une ligne de texte) être au bas de l’écran si le contenu ne va pas jusqu’au fond, ou être au bas du contenu si le le contenu nécessite des barres de défilement. Si le contenu ne nécessite pas de barres de défilement, cela fonctionne parfaitement, mais lorsque le contenu est trop long, le pied de page est toujours au même endroit, juste au-dessus du contenu.

Ma structure de base est la suivante:

Mon CSS correspondant (dépouillé un peu):

 body { margin: 0; padding: 0; height: 100%; } html { margin: 0; padding: 0; height: 100%; } #container { width: 674px; min-height: 100%; height: 100%; position: relative; margin: 0 auto; } #body { width: 616px; padding: 5px 14px 5px 14px; margin: 0 auto; padding-bottom: 20px; } #footer { position: absolute; bottom: 0; width: 644px; height: 20px; margin: 0 auto; }

La solution la plus simple consiste à utiliser min-height sur la et à positionner le

sur position:absolute;

Démo : jsfiddle et SO snippet:

 html { position: relative; min-height: 100%; } body { margin: 0 0 100px; /* bottom = footer height */ padding: 25px; } footer { background-color: orange; position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; overflow: hidden; }

   James Dean CSS Sticky Footer
 Blah blah blah blah
 More blah blah blah

  Footer Content

Pourquoi ne pas utiliser: { position: fixed; bottom: 0 } { position: fixed; bottom: 0 } ?

Une solution simple que j’utilise, fonctionne à partir d’IE8 +

Donnez min-height: 100% sur html afin que si le contenu est inférieur, alors la page fixe prenne en compte la hauteur totale du port d’affichage et les pieds de bas de page. Lorsque le contenu augmente, le pied de page se décale avec le contenu et continue de coller au fond.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

 html{ position:relative; min-height: 100%; } /*Normalize html and body elements,this style is just good to have*/ html,body{ margin:0; padding:0; } .pageContentWrapper{ margin-bottom:100px;/* Height of footer*/ } .footer{ position: absolute; bottom: 0; left: 0; right: 0; height:100px; background:#ccc; }

Html

le faire en utilisant jQuery mettre le code à l’intérieur de la

Utilisez celui-ci Il va le réparer.

 #ibox_footer { padding-top: 3px; position: absolute; height: 20px; margin-bottom: 0; bottom: 0; width: 100%; }

Cela devrait vous aider.

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

le plus simple est de définir un min-height à votre conteneur de page à 400 pixels en supposant que votre pied de page arrive à la fin. vous n’avez même pas besoin de mettre css pour le pied de page ou juste une width:100% supposant que votre pied de page est l’enfant direct de votre

Utilisez min-height comme valeur de pixel, au lieu de%. Comme: min-height: 620px; hauteur: auto;

et pied de page comme:

 .footer { height:70px; clear:both; position:relative; bottom:0; width: 100%; }

Le modèle partagé ici est très similaire au StickyFooter de Ryan Fait http://ryanfait.com/sticky-footer

Une seule div manque pour l’instant dans cette discussion (le modèle proposé ici par Kenneth Palanganas a bien fonctionné pour la conception locale de Win81 pendant environ 48 heures, puis dans / chrome réduit pour une raison inconnue). Le “push” div de Ryan satisfera certains navigateurs réticents. Notez que px est habituel, cependant, pour la cohérence de la mise en page liquide, em peut être préféré.

 * { border: 0; margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; } .footer, .push { height: 1em; } Your website content here.
 
 
 This is a footer

Je voudrais partager comment j’ai résolu le mien en utilisant la fonction Javascript appelée sur le chargement de la page. Cette solution positionne le pied de page en bas de l’écran lorsque la hauteur du contenu de la page est inférieure à la hauteur de l’écran.

 function fix_layout(){ //increase content div length by uncommenting below line //expandContent(); var wraph = document.getElementById('wrapper').offsetHeight; if(wraphLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam sortingstique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.
'+ 'Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ulsortingces posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.
'+ 'Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.
'+ 'Donec semper, sem nec sortingstique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.
'+ 'Donec dapibus orci sit amet elit. Maecenas rutrum ulsortingces lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ulsortingces feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.
'); }

 /*sample CSS*/ body{ background: black; margin: 0; } #header{ background: grey; } #content{background: yellow; } #footer{ background: red; position: absolute; } #header, #content, #footer{ display: inline-block; width: 100vw; }

     [some header elements here] 
  [some content elements here] 
  [some footer elements here]