Pieds de page collants CSS avec hauteur inconnue

Question

Pieds de page collants CSS avec hauteur inconnue

Demandé el 3 de Décembre, 2010: Quand la question a-t-elle été
23017 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Existe-t-il un moyen de coller un pied de page au bas de l'écran du navigateur ou juste après le contenu (selon ce qui est le plus long) à l'aide de CSS ? sin connaître à l'avance la taille du pied de page ?

Pour l'instant, j'utilise le positionnement absolu dans un conteneur qui contient le pied de page et le contenu avec une hauteur minimale du conteneur de 100 %, mais si je modifie le pied de page, je constate que je dois modifier le rembourrage au bas du conteneur pour qu'il corresponde à sa hauteur.

Demandé el 3 de Décembre, 2010 par Loyal Tingley

Answer 1

5 Réponses

Answer 2

37voto

Amit Baran Roy Points 21

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Résumé :

Pour un site avec un en-tête, une zone de contenu et un pied de page :

Set (jeu de mots) html, body {height: 100%;}
Définissez votre corps (ou une div enveloppante) à display: table; width: 100%; height: 100%;
Définissez votre en-tête, votre pied de page et votre zone de contenu comme suit display: table-row; . Donnez à votre en-tête et à votre pied de page height: 1px; et donnez à votre domaine de contenu height: auto;

L'en-tête et le pied de page s'agrandissent tous deux pour s'adapter à leur contenu. La zone de contenu s'agrandit pour s'adapter au contenu le plus important ou à l'espace disponible.

https://jsfiddle.net/0cx30dqf/

Répondu el 10 de Janvier, 2012 par Amit Baran Roy (21 Points )

Answer 3

24voto

Luke Points 1780

Si vous êtes prêt à vous lancer dans l'avenir du HTML5, vous pouvez utiliser flexbox ...

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

main {
   flex: 1;
}

Ma réponse plus détaillée à la même question : Comment créer un pied de page fluide et collant (exemple complet : http://jsfiddle.net/n5BaR/ )
Résolu par flexbox : http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Qu'est-ce que Flexbox ? https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Répondu el 6 de Décembre, 2013 par Luke (1780 Points )

Answer 4

1voto

mateos Points 440

Essayez ceci !

Utilise Flex !

PAS DE HAUTEUR FIXE, DE JAVASCRIPT OU DE TABLEAUX

S'étend lorsqu'il y a plus de contenu, et lorsqu'il n'y en a pas, il reste collé au fond.

Remarque : Ne fonctionne pas avec IE 9 et les versions inférieures

*{
  margin: 0; 
  padding: 0;
}
html, body{
  height: 100%; 
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;

}
.content{
  flex: 1;
  background: #ddd;
}

<body>
  <header>
    Header
  </header>

  <div class='content'>
    This is the page content
    <br>
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the   body css)
  </div>

  <footer>
    Footer
  </footer>
</body>

Répondu el 25 de Novembre, 2016 par mateos (440 Points )

Answer 5

1voto

L1zardK1ng Points 74

Pour une application avec un pied de page réactif (c'est-à-dire qui change de hauteur lors du redimensionnement), vous pouvez utiliser jquery pour ajuster dynamiquement le padding du bas de page pour l'élément parent. En complément de cet article : Conserver le pied de page en bas de page

HTML :

<div class=”main-container”>
   <header>
    this is a header
   </header>
   <section>
    this is content
   </section>
   <footer>
    this is a footer
   </footer>
</div>

CSS :

html,
body {
 height: 100%;
 position: relative;
}
.main-container {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

CoffeeScript :

footerEventListener = ->
  $(window).on "resize", ->
    setFooterHeight()

setFooterHeight = ->
  // get footer height in px
  bottomPadding = $("footer").css("height")
  $(".main-wrapper").css("padding-bottom", "#{bottomPadding}") 

// init footer events
setFooterHeight()
footerEventListener()

Consultez le site CodePen ici.

Répondu el 1 de Juillet, 2019 par L1zardK1ng (74 Points )

Answer 6

0voto

luki Points 19

Comme personne ne connaît la réponse pour le sticky footer sans connaître la hauteur de celui-ci, en utilisant css (solution crosbrowser), j'ai été obligé de la calculer

jquery :

if( $(document).height() < $(window).height() )
{
    $('#content').height
    (
        $(window).height - $('#footer').height()
    );
}

structure html :

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

Répondu el 23 de Août, 2014 par luki (19 Points )

Pieds de page collants CSS avec hauteur inconnue

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Pieds de page collants CSS avec hauteur inconnue

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: