web-dev-qa-db-fra.com

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

Je veux positionner le pied de page au bas de la page avec un en-tête fixe également ...

  • Pas avec position: fixed - Je ne veux pas qu'il reste à l'écran, il devrait simplement être à la fin de la page et se comporter normalement lors du défilement.

  • Pas au bas de l'écran visible - Au bas de la page, c'est-à-dire; après tout autre contenu.

Voici un diagramme pour mieux expliquer:

Footer problem

Voici le code:

  • J'ai préparé une démo: JSFiddle
  • Ou voir ci-dessous
<div id="header">Header</div>
<div id="content">
    <p>Some content...</p>    
</div>
<div id="footer">Footer</div>

body{
    /* Just to enable scrolling in JSFiddle */
    height: 1000px;
}

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

#content{
    width: 100%;
    position: absolute;
    top: 100px; /*Height of header*/
    z-index: 0;
}

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

/*For demo only*/
#header, #footer{
    border: 3px dashed #333333;
    background: #FFFFFF;
}

#content{
    background: #CCCCCC;
    height: 200px;
}
htmlcsssticky-footer
21
Drahcir

Comme vous l'avez mentionné, position: fixed positionnerait le pied de page avec le respect de la fenêtre d'affichage plutôt que la page elle-même. Par conséquent, nous devons conserver l'élément dans un flux normal et le positionner d'une manière ou d'une autre au bas de la page.

Il existe plusieurs approches pour y parvenir, qui ont été discutées dans la nature au cours de la période.
Par exemple:

Pied collant

Dans cette réponse, je choisirais méthode de Ryan Fait ​​car elle est simple et facile à comprendre et répond également à vos besoins (situations dans lesquelles l'en-tête et le pied de page ont une hauteur fixe) .

Considérant la structure ci-dessous:

<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>

Les étapes suivantes sont nécessaires:

  1. Définition de height des éléments <html> et <body> sur 100% qui est requis pour l'étape suivante1.

  2. La chose la plus importante à faire est de s’assurer que le #content est suffisamment élevé pour afficher le #footer au bas de la page. Par conséquent, nous donnons au #content un min-height de 100%.

  3. Jusqu'à présent , le #content a pris 100% de hauteur dans la fenêtre d'affichage, nous devrions donc tirer le pied de page vers le haut pour le positionner en bas de la page. Pour ce faire, nous pourrions attribuer au #content un margin-bottom négatif, équivalent au height du pied de page. De même, pour vous assurer que le pied de page apparaît en haut du contenu, nous devons position le pied de page relatively. Démo ici.

  4. Comme on peut le constater, lorsque le contenu de #content augmente, une partie du contenu passe derrière le pied de page. Nous pourrions éviter cela en ajoutant un élément d'espacement à la fin de #content ou en utilisant la combinaison de padding-bottom et box-sizing: border-box2 qui est censé être supporté sur IE8 aussi.

4.1 Ajouter un spacer

Exemple ici

<div id="content">
    <!-- content goes here -->
    <div class="spacer"></div>
</div>
<div id="footer">Footer</div>

.spacer, #footer { height: 100px; }

4.2 Combinaison de padding-bottom et box-sizing

Exemple mis à jour

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

(Notez que les préfixes du fournisseur ont été omis pour des raisons de brièveté)

Ajout de l'en-tête

  1. Si l'en-tête doit rester dans un flux normal , vous pouvez simplement l'ajouter au #content comme suit:
    (Exemple ici)

    <div id="content">
    <div id="header">Header</div>
    ...

  2. Mais si cela devait être positionné absolument 3, nous devons insérer le contenu de l’élément #content dans l’ordre pour éviter le chevauchement .

Donc, encore une fois, on pourrait soit ajouter un spacer au début de #content (Exemple ici):

<div id="header">Header</div>
<div id="content">
    <div class="header-spacer"></div> 
    <!-- content goes here -->
    <div class="footer-spacer"></div> 
</div>
<div id="footer">Footer</div>

Ou utilisez la combinaison de padding-top et box-sizing comme suit:

<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */

    padding-top   : 50px;  /* Equivalent to header's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

Exemple de mise à jour (notez que les préfixes du fournisseur ont été omis pour des raisons de brièveté)

Enfin, mais non par ordre d'importance!

De nos jours, tous les principaux navigateurs Web modernes prennent en charge la déclaration box-sizing: border-box (y compris IE8). Toutefois, si vous recherchez la méthode traditionnelle qui prend en charge un navigateur plus large, utilisez plutôt des éléments d'espacement.

1. Ceci est nécessaire pour que min-height: 100% fonctionne sur l'élément #content (car une valeur en pourcentage est relative au height du bloc contenant de la boîte qui est établi par <body>). De plus, <html> devrait avoir un caractère explicite height pour que height: 100% fonctionne sur <body>.

2. box-sizing: border-box permet aux agents d'utilisateur de calculer la variable width/height de la boîte, y compris le remplissage et les bordures.

3. Selon la spécification , les éléments en position absolue sont des éléments ayant un position sur absolute ou fixed.

32
Hashem Qolami

Ou pour ceux qui ont trouvé ce message en cherchant sur Google et qui veulent une réponse encore plus courte, sans enveloppe (parce que vous n'en avez pas besoin):

html { height: 100%; }
body { min-height: 100%; position: relative; padding-bottom: 3em; }
.footer { height: 3em; position: absolute; bottom: 0; }

ceci fait, la page a maintenant au moins 100% de la hauteur de l'écran et le pied de page se trouve au bas de la page, pas au bas de "l'écran". Si la page est plus longue que l'écran, elle sera toujours en bas, et nous l'avons fait sans "éléments de wrapper" artificiels ni autres éléments similaires: l'élément body est déjà le wrapper dont nous avons besoin =)

Le seul inconvénient est que la marge du corps doit être identique à la hauteur du pied de page, mais en tant que valeur négative, car la règle "bottom: 0" fera que le pied de page commence en bas au lieu de la ligne de base. Là encore, en tant que CSS, .less ou .styl, cela est trivialement assuré.

3
Mike 'Pomax' Kamermans

Vous l'avez presque. Ce dont vous avez besoin est un conteneur.

Voici mon bit révisé: JSFiddle Update

Ajouter un conteneur div:

<div id="container">
    <div id="header"></div>
    <div id="page"></div>
    <div id="footer"></div>
</div>

Puis rendez la position relative et la hauteur 100%:

#container {
    height: 100%;
    position: relative;
}

Et assurez-vous que la position est absolue pour le pied de page.

3
Slulego
But if you want the footer to take full size of the screen while #wrapper is 1000px and centered you would do:


<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>

html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#wrapper-inner {
margin: 0 auto;
width: 1000px;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
0
Emma

Je suis assez novice en développement Web et je sais que l'on a déjà répondu à cette question, mais c'est la façon 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 mon pied de page peut avoir différentes hauteurs sur différentes sections de l'application Web. Et j'ai fini par utiliser FlexBox et un spacer.

  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 comportement column 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 HTML pourrait être quelque chose comme 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

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

0
Camo

Pour faire simple:

#header {
    position: fixed;
    width:100%;
    height:100px;
    top:0px;
    z-index:2;
}
#content, #footer {
    position: relative; /* or leave it static as by default */
    z-index:1;
}
body,div {
    margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */
}
#content {
    margin-top: 100px; /* the same value as header's height */
}

jsfiddle

0
Stano