Comment puis-je étendre un pied de page au bas de la page?

j’ai une mise en page comme celle-ci

Au moment où ma page est disposée comme ceci:

 ------------------- | | 100px height | HEADER | |-----------------| | | | MAIN | 500px height | | |-----------------| | | | FOOTER | |-----------------| | | | | ------------------- 

J’aimerais que le pied de page suive la zone de contenu principale au bas de la page, comment cela peut-il être réalisé?

 ------------------- | | 100px height | HEADER | |-----------------| | | | MAIN | 500px height | | |-----------------| | | | FOOTER | | | | | | FOOTER | ------------------- 

REMARQUE: J’ai remarqué que toutes les réponses à ce jour épingleront le bas de page en bas de la page. Cependant, lorsque vous le faites glisser, le bas de page se déplace vers le bas / le conteneur principal se développe.

Je cherchais une solution à ce problème précis et je suis tombé sur un moyen très simple d’obtenir l’effet que je recherchais:

 footer { box-shadow: 0 50vh 0 50vh #000; } 

Cela crée une ombre qui tombera de l’écran si elle n’est pas nécessaire, mais donnera une couverture de 100vh (hauteur totale de la fenêtre d’affichage) à l’espace sous le pied de page, de sorte que l’arrière-plan n’apparaisse pas en dessous.

Je créerais l’illusion que le pied de page s’étend si possible vers le bas.

Dites la couleur de fond du pied de page est # 000000;

Définissez la couleur d’arrière-plan du corps sur # 000000

et assurez-vous

largeur 100%.

la couleur # 00000 est à titre d’exemple seulement vous pouvez avoir besoin d’une tranche d’image ou de la couleur lat utilisée dans un dégradé etc …

Bien que cela ait été marqué comme une réponse, il ne semble pas répondre pleinement à la question des PO. J’ai eu le même défi et voici ce que j’ai trouvé pour travailler:

  1. Définissez votre code HTML & Body à 100% de hauteur
  2. Assurez-vous que tout votre contenu, y compris votre pied de page, est entouré d’un grand div (site-container)
  3. Fiddle avec l’espace dans le pied de page.

Voici le CSS:

 html, body{ height: 100% } .site-container{ overflow: hidden; min-height: 100%; min-width: 960px; } .footer{ padding-bottom: 32000px; margin-bottom: -32000px; } 

J’ai trouvé ceci ici: https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/ qui contient plus d’informations.

Cela devrait faire l’affaire http://jsfiddle.net/fXf4K/

Vous pouvez utiliser un pied de page collant pour obtenir cet effet, comme celui indiqué ici , et l’appliquer à votre conception pour pousser votre pied de page au bas du document, comme dans cette démonstration que j’ai mise en place:

Démo , éditez ici .

Essayez le violon ci-dessous qui montre comment garder le pied de page toujours en bas.

Violon: http://jsfiddle.net/evTb4/

Démo: http://jsfiddle.net/evTb4/embedded/result/

J’ai eu le même problème et j’ai trouvé que cela fonctionnait – aussi longtemps que le pied de page est sorti de lui-même, c’est-à-dire pas dans un conteneur div ou autre.

Fondamentalement, j’avais besoin que mon contenu soit de largeur fixe et centré sur un arrière-plan blanc avec une image d’arrière-plan répétée horizontalement dans la balise body qui étend toute la largeur de la fenêtre du navigateur. Je voulais que le pied de page soit de couleur sombre et s’étende au bas de la page, quelle que soit la hauteur du contenu et la taille de la fenêtre du navigateur.

Ma page (très simplement) était la suivante:

   usual stuff  
fixed height and containing various stuff
floated left and containing various stuff
various stuff, address etc.

Puis dans le css inclure ces règles (avec tous les autres styles):

 html, body { height: 100%; overflow: hidden; } footer { height: 100%; } 

Le débordement caché a supprimé la barre de défilement gênante provoquée par le 100% html et la hauteur du corps compensant la hauteur du conteneur et s’étendant au-delà de la fenêtre du navigateur.

Similaire à @ c4collins, vous pouvez utiliser la hauteur de vue au lieu d’un pixel fixe, au cas où quelqu’un aurait un moniteur énorme

 footer{ box-shadow: 0 100vh 0 100vh #000000; }