CSS pour que le pied de page HTML reste en bas de la page avec une hauteur minimale, mais ne chevauche pas la page

380

J'ai eu la page suivante (lien mort:) http://www.workingstorage.com/Sample.htmqui a un pied de page que je ne peux pas faire asseoir au bas de la page.

Je veux que le pied de page

  • coller au bas de la fenêtre lorsque la page est courte et que l'écran n'est pas rempli, et
  • restez à la fin du document et descendez normalement lorsqu'il y a plus d'un écran de contenu (au lieu de chevaucher le contenu).

Le CSS est hérité et m'embrouille; Je n'arrive pas à le changer correctement pour mettre une hauteur minimale sur le contenu ou faire descendre le pied de page vers le bas.

css footer Caveatrob
la source
16
Il est étonnant que ce soit un problème si courant. Peut-être que dans CSS4, nous verrons des implémentations de "créer une barre de navigation" et "créer un pied de page", car elles sont si souvent essayées.
isomorphismes
1
Il n'y aura jamais de CSS4 (CSS3 ne fera que grandir). Je pense que cela sera corrigé avec la mise en œuvre de flexbox.
Marijke Luttekes
2
Excellent article à ce sujet: css-tricks.com/couple-takes-sticky-footer
Phil
expertsuggestion.com/css-snippets/8
Lalit Baghel

Réponses:

344

Une méthode simple consiste à rendre le corps 100%de votre page, avec un min-heightde 100%trop. Cela fonctionne bien si la hauteur de votre pied de page ne change pas.

Donnez au pied de page une marge négative en haut:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
Jon Winstanley
la source
28
Cela ne fonctionne que si vous connaissez à l'avance la hauteur de votre pied de page. Parfois, les pieds de page ont un contenu dynamique, ou votre construction d'un cadre. Des idées de pieds de page à hauteur variable?
Costa
@Costa consultez ma réponse ici , pour une solution qui fonctionne avec des pieds de page à hauteur variable.
Jose Rui Santos
pour le contenu dynamique, omettez simplement la "hauteur" et le pied de page s'adaptera au contenu. Non testé dans tous les navigateurs
m47730
Cela peut exiger box-sizing: border-box;du corps [et du #container].
konsolebox
Cela ressemble à beaucoup de trucs étranges, il y a des réponses ci-dessous qui sont simples et n'utilisent pas de trucs.
Andrew Koster
166

J'ai développé une méthode assez simple pour coller le pied de page en bas, mais comme les méthodes les plus courantes, vous devrez l'ajuster pour l'adapter à la hauteur de votre pied de page.

VOIR LA DÉMO

Méthode Flexbox:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Développer l'extrait

Cette méthode ci-dessous utilise une "astuce" en plaçant un ::afterpseudo-élément sur le body, et le définit pour avoir la hauteur exacte du pied de page, afin qu'il occupe exactement le même espace que le pied de page, donc lorsque le pied de page est absolutepositionné dessus, il semblerait que le pied de page prenne vraiment de la place et élimine les effets négatifs de son positionnement absolu (par exemple, en parcourant le contenu du corps)

position:absolute méthode: (ne permet pas la hauteur dynamique du pied de page)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Développer l'extrait

Méthode de mise en page du tableau:

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Développer l'extrait

vsync
la source
Simple et élégant et plus important encore, cela fonctionne. D'autres solutions échouent lorsque vous commencez à ajouter des div avec display: table display: table-row display:table-cell. Cependant, j'ai trouvé que je devais ajouter body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}pour éviter une barre de défilement. Vous pouvez répondre à cela en ajustant le body:after heightmais je spécifie le mien en rem pas px donc cela devient problématique.
Steve Waring
3
@SteveWaring - Merci. Mise à jour de cette réponse car elle était assez ancienne. Maintenant, je suis en faveur de l'utilisationflexbox
vsync
1
Le CSS sous "balisage commun de base" avait une petite erreur qui l'a fait ne pas fonctionner (l'erreur n'était pas présente dans le "DEMO" lié, ce qui est correct). J'ai pris la liberté de le réparer.
sleske
3
MERCI! La solution flexbox est en fait simple et n'utilise aucun hacks ou tailles fixes ou positions fixes étranges.
Andrew Koster
1
Cette démo est la seule qui fonctionne! Fantastique, merci!
Drakinite
51

Une approche très simple qui fonctionne très bien avec plusieurs navigateurs est la suivante:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
Développer l'extrait

Tamás Pap
la source
34

Je l'ai utilisé pour coller mon pied de page en bas et cela a fonctionné pour moi:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

C'est la seule modification que vous devez faire dans le HTML, ajoutez cela divavec la "allButFooter"classe. Je l'ai fait avec toutes les pages, celles qui étaient si courtes, je savais que le pied de page ne resterait pas en bas, et aussi les pages suffisamment longues pour que je sache déjà que je devais faire défiler. J'ai fait cela, donc j'ai pu voir que cela fonctionne bien dans le cas où le contenu d'une page est dynamique.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

La "allButFooter"classe a une min-heightvaleur qui dépend de la hauteur de la fenêtre d'affichage ( 100vhsignifie 100% de la hauteur de la fenêtre d'affichage) et de la hauteur du pied de page, que je savais déjà40px .

C'est tout ce que j'ai fait et cela a parfaitement fonctionné pour moi. Je ne l'ai pas essayé dans tous les navigateurs, juste Firefox, Chrome et Edge, et les résultats étaient comme je le souhaitais. Le pied de page colle au bas, et vous n'avez pas à vous soucier de l'index z, de la position ou de toute autre propriété. La position de chaque élément dans mon document était la position par défaut, je ne l'ai pas changé en absolu ou fixe ou quoi que ce soit.

Travailler avec une conception réactive

Voici quelque chose que j'aimerais clarifier. Cette solution, avec le même pied de page de 40 pixels de haut, n'a pas fonctionné comme je m'y attendais lorsque je travaillais dans une conception réactive à l'aide Twitter-Bootstrap. J'ai dû modifier la valeur que je soustrayais dans la fonction:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

C'est probablement parce qu'il a Twitter-Bootstrapses propres marges et rembourrages, c'est pourquoi j'ai dû ajuster cette valeur.

J'espère que cela vous sera utile! Au moins, c'est une solution simple à essayer, et cela n'implique pas d'apporter de grandes modifications à l'ensemble du document.

N. Larrieux
la source
J'ai rencontré des problèmes avec toutes sortes de solutions à ce problème. Cette solution fonctionne avec ma page qui varie ce qui est affiché dans le corps en utilisant display: noneMerci. C'est sympa et simple aussi.
Steve Waring du
après plusieurs heures d'essayer des solutions, seulement deux ont fonctionné nl. position: fixed; bottom: 0et celui-là. Cette solution est la meilleure car le pied de page ne colle pas en bas, mais reste à la fin de la page déroulante.
Hmerman6006
pour s'appuyer sur votre réponse, vous pouvez la regarder autrement en définissant le .footer {max-height: calc(100vh+40px); position: absolute}. Comme cela fonctionne également, vous devez simplement connaître votre taille corporelle.
Hmerman6006
29

À partir d'IE7, vous pouvez simplement utiliser

#footer {
    position:fixed;
    bottom:0;
}

Voir caniuse pour le support.

Liam
la source
77
Je ne veux pas que le pied de page soit en bas lorsqu'il y a du contenu au-delà du pied de page. Je veux que le pied de page reste en bas lorsqu'il n'y en a pas assez, puis se développe vers le bas comme d'habitude lorsqu'il y a plus d'un écran. Le pied de page collant a résolu ce problème.
Caveatrob
@Caveatrob: J'ai pris la liberté de modifier ces informations importantes dans votre question, juste pour éviter les malentendus (pour les futurs lecteurs, vous avez probablement résolu cela entre-temps :-)).
sleske
Cette solution est la seule à imprimer le pied de page sur chaque page et c'est si simple! Mais je ne peux pas faire en sorte que le contenu ne chevauche pas le contenu principal. Quelqu'un a une solution pour ça?
Hatzen
15

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

Donnez une hauteur minimale: 100% en html de sorte que si le contenu est moins, la page fixe prend la hauteur du port d'affichage complet et le pied de page reste en bas de la page. Lorsque le contenu augmente, le pied de page diminue avec le contenu et continue de rester en bas.

Démo de travail JS fiddle: 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

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
Sanjeev
la source
c'est bon..mais juste mettre à jour .pageContentWrapper {padding-bottom: 100px; / * Hauteur du pied de page * /}
Subodh Sharma
Merci beaucoup. travaillant sur Angular 7
Carlos Torres
Je ne veux pas créer une barre de défilement inutile lorsque cela est possible.
Константин Ван
14

Pourtant, une autre solution vraiment simple est celle-ci:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

L'astuce consiste à utiliser un display:tablepour l'ensemble du document et display:table-rowavec height:0pour le pied de page.

Étant donné que le pied de page est le seul enfant de corps qui dispose d'un affichage en tant que table-row, il est rendu au bas de la page.

Jose Rui Santos
la source
J'adore les tables CSS, mais elles créent un problème sur la ligne qui est assez étrange: stackoverflow.com/questions/24898115/…
Costa
1
Cette solution ne semble pas fonctionner complètement - Firefox ignore la hauteur de pied de page 0. J'ai utilisé la hauteur 1px ou même 1% à la place. Edge, IE11, Chrome et Safari mobile sont satisfaits de 0.
Kitet
J'adore vraiment cette solution. Mais quand je construis ma disposition comme celle-ci, le calcul par le navigateur des éléments enfants est bizarre. Disons que nous voulons avoir un conteneur en haut de la page et qu'il doit height: 100%alors être en fait son 100% lorsque le ratio de la fenêtre d'affichage est 1/1 (carré). Lorsque la fenêtre devient plus large (paysage), la hauteur sera supérieure à 100% et si elle est plus étroite (portrait) inférieure à 100%. La hauteur est donc proportionnelle à la largeur de la fenêtre. J'ai essayé de le résoudre avec un autre wrapper mais cela n'a pas fonctionné. Quelqu'un a obtenu une solution ou au moins un indice ???
Axel
@Axel Dans cette version, j'ai ajouté un div bleu sur le dessus avec 100% de hauteur qui occupe toute la hauteur (moins la hauteur du pied de page), quelle que soit la largeur de la fenêtre d'affichage. Je pense que vous pourriez avoir d'autres problèmes de CSS. Essayez de créer une version minimisée de votre problème sur la base de mon jsFiddle original
Jose Rui Santos
@JoseRuiSantos Merci beaucoup pour votre réponse. Il semble que ce soit un bug FireFox. Voir capture d'écran
Axel
8

Une solution de flexion très simple qui ne suppose pas de hauteurs fixes ni de changement de position des éléments.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Prise en charge du navigateur

Tous les principaux navigateurs, sauf IE11 et versions antérieures.

Assurez-vous d'utiliser Autoprefixer pour les préfixes appropriés.

Afficher l'extrait de code

m.spyratos
la source
travaillé comme un charme! même pour les res plus de 4k footer sticks en bas
Arpan Banerjee
7

Une chose dont il faut se méfier, ce sont les appareils mobiles, car ils mettent en œuvre l'idée de la fenêtre d'affichage d'une manière «inhabituelle»:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

En tant que tel, en utilisant position: fixed; (comme je l'ai vu recommandé dans d'autres endroits) n'est généralement pas la voie à suivre. Bien sûr, cela dépend du comportement exact que vous recherchez.

Ce que j'ai utilisé et qui a bien fonctionné sur ordinateur et sur mobile, c'est:

<body>
    <div id="footer"></div>
</body>

avec

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
Ben Jackson
la source
6

Faites ceci

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Vous pouvez également lire sur flex il est pris en charge par tous les navigateurs modernes

Mise à jour : j'ai lu sur flex et l'ai essayé. Ça a marché pour moi. J'espère qu'il en va de même pour vous. Voici comment j'ai implémenté. Ici, le principal n'est pas l'ID, c'est le div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Ici, vous pouvez en savoir plus sur flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

N'oubliez pas qu'il n'est pas pris en charge par les anciennes versions d'IE.

Aarth Tandel
la source
1
C'est la meilleure réponse dans la pratique. L'utilisation flex-grow: 1de quelque chose au-dessus du pied de page gardera correctement le pied de page en bas.
iBug
5

Je viens de répondre comme une question similaire ici:

Positionner le pied de page au bas de la page avec un en-tête fixe

Je suis assez nouveau dans le développement Web, et je sais que cela a déjà été répondu, mais c'est la manière la plus simple que j'ai trouvée pour le résoudre et je pense que c'est en quelque sorte différent. Je voulais quelque chose de flexible car le pied de page de mon application web a une hauteur dynamique, j'ai fini par utiliser FlexBox et une entretoise.

  1. Commencez par définir la hauteur de votre html et de votre corps
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

J'assume un columncomportement pour notre application, dans le cas où vous devez ajouter un en-tête, un héros ou tout contenu aligné verticalement.

  1. Créer la classe d'espacement
.spacer {
    flex: 1; 
}
  1. Donc, plus tard, votre code HTML pourrait être quelque chose comme 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Vous pouvez jouer avec lui ici https://codepen.io/anon/pen/xmGZQL

Camo
la source
5

Ceci est connu comme un pied de page collant. Une recherche Google pour cela donne beaucoup de résultats. Un CSS Sticky Footer est celui que j'ai utilisé avec succès. Mais il y en a plus.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<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>
Développer l'extrait

Source pour ce code

Paolo Bergantino
la source
3

Ma méthode jquery, celle-ci place le pied de page en bas de la page si le contenu de la page est inférieure à la hauteur de la fenêtre, ou place simplement le pied de page après le contenu sinon:

De plus, conserver le code dans son propre boîtier avant un autre code réduira le temps nécessaire pour repositionner le pied de page.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Sam Jones
la source
3

Je me suis moi-même penché sur ce problème. J'ai vu pas mal de solutions et chacune d'elles avait des problèmes, impliquant souvent des nombres magiques.

Donc, en utilisant les meilleures pratiques de diverses sources, j'ai trouvé cette solution:

http://jsfiddle.net/vfSM3/248/

La chose que je voulais réaliser spécifiquement ici était de faire défiler le contenu principal entre le pied de page et l'en-tête à l'intérieur de la zone verte.

voici un simple css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
husayt
la source
3
Je déteste les sites conçus comme ça. Pourquoi voulez-vous restreindre la quantité de texte que je peux lire en même temps? Je n'ai pas besoin de voir l'en-tête et le pied de page tout le temps, je sais où les trouver quand je les veux.
Tarmil
1
@Tarmil jetez un œil à numerics.info . Voyez-vous maintenant quand cela pourrait être utile?
husayt
3

Voilà comment j'ai résolu le même problème

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
Développer l'extrait

Nemus
la source
3 
footer {
  margin-top:calc(5% + 60px);
}

Cela fonctionne bien

Karthikaeyan
la source
2

Personnalisez simplement la section de pied de page

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
rashedcs
la source
Ca ne fonctionne pas. Cela colle toujours en bas même si nous avons une très grande page. Il ne peut pas faire défiler toutes les pages mais simplement rester en bas.
fWd82
Ça ne marche pas. Le pied de page arrive en tête du contenu.
indolentdeveloper
1

voici mes deux cents. En comparaison avec d'autres solutions, il n'est pas nécessaire d'ajouter des conteneurs supplémentaires. C'est pourquoi cette solution est un peu plus élégante. Sous l'exemple de code, je vais expliquer pourquoi cela fonctionne.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

Donc, la première chose que nous faisons, c'est de faire le plus gros conteneur (html) à 100%. La page html est aussi grande que la page elle-même. Ensuite, nous définissons la hauteur du corps, elle peut être supérieure à 100% de la balise html, mais elle devrait au moins être aussi grande, par conséquent, nous utilisons une hauteur minimale de 100%.

Nous rendons également le corps relatif. Relatif signifie que vous pouvez déplacer l'élément de bloc par rapport à sa position d'origine. Nous n'utilisons pas cela ici cependant. Parce que le parent a une deuxième utilisation. Tout élément absolu est absolu à la racine (html) ou au premier parent / grand-parent relatif. C'est ce que nous voulons, nous voulons que le pied de page soit absolu, par rapport au corps, à savoir le bas.

La dernière étape consiste à définir le pied de page sur absolu et bas: 0, ce qui le déplace vers le bas du premier parent / grand-parent qui est relatif (corps du cours).

Maintenant, nous avons encore un problème à résoudre, lorsque nous remplissons la page complète, le contenu passe sous le pied de page. Pourquoi? bien, parce que le pied de page n'est plus à l'intérieur du "flux html", car il est absolu. Alors, comment pouvons-nous résoudre ce problème? Nous ajouterons un rembourrage au bas du corps. Cela garantit que le corps est réellement plus grand que son contenu.

J'espère que j'ai fait beaucoup clair pour vous les gars.

David
la source
1

Dynamic one liner utilisant jQuery

Toutes les méthodes CSS que j'ai rencontrées sont trop rigides. En outre, la définition du pied de page fixedn'est pas une option si cela ne fait pas partie de la conception.

Testé sur:

  • Chrome: 60
  • FF: 54
  • IE: 11

En supposant cette disposition:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Utilisez la fonction jQuery suivante:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Qu'est - ce qui fait est fixé le min-heightpour #contentla hauteur de la fenêtre - la hauteur du pied de page que jamais qui pourrait être à l'époque.

Depuis que nous l'avons utilisé min-height, si la #contenthauteur dépasse la hauteur de la fenêtre , la fonction se dégrade gracieusement et n'a aucun effet car elle n'est pas nécessaire.

Voyez-le en action:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Développer l'extrait

Même extrait sur JsFiddle

Prime:

Nous pouvons aller plus loin et adapter cette fonction au redimensionnement dynamique de la hauteur du visualiseur comme suit:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Développer l'extrait

I haz kode
la source
1

Tu peux le faire

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
Abdallah Abdillah
la source
0

Définissez simplement le code html, le corps et les autres lignes, à l'exception du pied de page, à 100%. par exemple

<body>
<header></header>
<content></content>
<footer></footer>

le css devient 

html, body, header, content{
height:100%;
}
Olatunde G.
la source
0 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
San Jaisy
la source
0

Que dire de cela:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
novecentonove
la source
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant pourquoi et / ou comment ce code répond à la question améliore sa valeur à long terme.
β.εηοιτ.βε
-1

J'ai utilisé dans mes nombreux projets et je n'ai jamais eu de problème :)

pour votre référence, le code est en extrait 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
Développer l'extrait

Santosh Khalse
la source