Disposition CSS de hauteur minimale de 100%

Quelle est la meilleure façon de créer un élément de hauteur minimale de 100% sur un large éventail de navigateurs? En particulier, si vous avez une mise en page avec un en-tête et un pied de page de hauteur fixe, comment rendre la partie de contenu intermédiaire remplissant 100% de l’espace entre-temps avec le pied de page fixé au bas?

J’utilise le suivant: Disposition CSS – 100% hauteur

Min-hauteur

L’élément #container de cette page a une hauteur minimale de 100%. Ainsi, si le contenu nécessite plus de hauteur que la fenêtre d’affichage, la hauteur de #content force #container à s’allonger également. Les colonnes possibles dans #content peuvent alors être visualisées avec une image d’arrière-plan sur #container; Les divs ne sont pas des cellules de tableau et vous n’avez pas besoin (ou ne voulez pas) que les éléments physiques créent un tel effet visuel. Si vous n’êtes pas encore convaincu pensez à des lignes et des dégradés instables au lieu de lignes droites et de schémas de couleurs simples.

Positionnement relatif

Comme #container a une position relative, #footer restra toujours en bas; Étant donné que la hauteur minimale mentionnée ci-dessus n’empêche pas #container de passer à l’échelle, cela fonctionnera même si (ou plus particulièrement quand) #contain force #container à s’allonger.

Fond de rembourrage

Comme il n’est plus dans le stream normal, padding-bottom de #content fournit désormais l’espace nécessaire pour le #footer absolu. Ce remplissage est inclus dans la hauteur défilée par défaut, afin que le pied de page ne chevauche jamais le contenu ci-dessus.

Mettez à l’échelle la taille du texte ou redimensionnez la fenêtre de votre navigateur pour tester cette disposition.

 html,body { margin:0; padding:0; height:100%; /* needed for container min-height */ background:gray; font-family:arial,sans-serif; font-size:small; color:#666; } h1 { font:1.5em georgia,serif; margin:0.5em 0; } h2 { font:1.25em georgia,serif; margin:0 0 0.5em; } h1, h2, a { color:orange; } p { line-height:1.5; margin:0 0 1em; } div#container { position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:750px; background:#f0f0f0; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } div#header { padding:1em; background:#ddd url("../csslayout.gif") 98% 10px no-repeat; border-bottom:6px double gray; } div#header p { font-style:italic; font-size:1.1em; margin:0; } div#content { padding:1em 1em 5em; /* bottom padding for footer */ } div#content p { text-align:justify; padding:0 1em; } div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */ background:#ddd; border-top:6px double gray; } div#footer p { padding:1em; margin:0; } 

Fonctionne bien pour moi.

Pour définir une hauteur personnalisée verrouillée quelque part:

 body, html { height: 100%; } #outerbox { width: 100%; position: absolute; /* to place it somewhere on the screen */ top: 130px; /* free space at top */ bottom: 0; /* makes it lock to the bottom */ } #innerbox { width: 100%; position: absolute; min-height: 100% !important; /* browser fill */ height: auto; /*content fill */ } 
 

Voici une autre solution basée sur vh , ou viewpoint height , pour plus de détails, visitez les unités CSS . Il est basé sur cette solution , qui utilise plutôt le flex.

 * { /* personal preference */ margin: 0; padding: 0; } html { /* make sure we use up the whole viewport */ width: 100%; min-height: 100vh; /* for debugging, a red background lets us see any seams */ background-color: red; } body { /* make sure we use the full width but allow for more height */ width: 100%; min-height: 100vh; /* this helps with the sticky footer */ } main { /* for debugging, a blue background lets us see the content */ background-color: skyblue; min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */ } footer { /* for debugging, a gray background lets us see the footer */ background-color: gray; min-height:2.5em; } 
 

This is the content. Resize the viewport vertically to see how the footer behaves.

This is the content.

This is the content.

This is the content.

This is the content.

This is the content.

This is the content.

This is the content.

This is the content.

This is the content.

This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.

This is the footer.

La réponse de kleolb02 est plutôt bonne. une autre façon serait une combinaison du pied collant et le hack min-hauteur

Une solution CSS pure ( #content { min-height: 100%; } ) fonctionnera dans beaucoup de cas, mais pas dans tous – en particulier IE6 et IE7.

Malheureusement, vous devrez recourir à une solution JavaScript pour obtenir le comportement souhaité. Cela peut être fait en calculant la hauteur souhaitée pour votre contenu

et en la définissant comme une propriété CSS dans une fonction:

 function resizeContent() { var contentDiv = document.getElementById('content'); var headerDiv = document.getElementById('header'); // This may need to be done differently on IE than FF, but you get the idea. var viewPortHeight = window.innerHeight - headerDiv.clientHeight; contentDiv.style.height = Math.max(viewportHeight, contentDiv.clientHeight) + 'px'; } 

Vous pouvez ensuite définir cette fonction en tant que gestionnaire pour les événements onLoad et onResize :

  . . .  

Pour que min-height fonctionne correctement avec des pourcentages, tout en héritant de la taille 1px nœud parent, l’astuce consiste à définir la hauteur du nœud parent à 1px , puis la min-height l’enfant fonctionnera correctement.

Page de démonstration

Je suis d’accord avec Levik car le conteneur parent est défini sur 100% si vous avez des barres latérales et que vous souhaitez qu’elles remplissent l’espace pour se retrouver avec le pied de page, vous ne pouvez pas les définir à 100%. signifie que le pied de page finit par être enfoncé lors de l’utilisation de la fonction clear.

Pensez-y de cette façon si votre en-tête a pour hauteur 50px et que votre pied de page a une hauteur de 50px et que le contenu est simplement adapté à l’espace restant, par exemple 100px et que le conteneur de page est à 100%. Ensuite, lorsque vous définissez la hauteur de la barre latérale à 100%, elle est alors de 200 pixels, même si elle est supposée être bien ajustée entre l’en-tête et le pied de page. Au lieu de cela, il devient 50px + 200px + 50px, donc la page est maintenant 300px car les barres latérales sont définies à la même hauteur que le conteneur de page. Il y aura un grand espace blanc dans le contenu de la page.

J’utilise Internet Explorer 9 et c’est ce que j’obtiens en utilisant cette méthode à 100%. Je ne l’ai pas essayé dans d’autres navigateurs et je suppose que cela peut fonctionner dans d’autres options. mais ce ne sera pas universel.

Vous devez d’abord créer une div avec id='footer' après votre div du content , puis faites-le simplement.

Votre code HTML devrait ressembler à ceci:

   
...

Et le CSS:

 ​html, body { height: 100%; } #content { height: 100%; } #footer { clear: both; } 

Probablement la solution la plus courte (ne fonctionne que dans les navigateurs modernes)

Ce petit morceau de CSS fait en sorte que "the middle content part fill 100% of the space in between with the footer fixed to the bottom" :

 html, body { height: 100%; } your_container { min-height: calc(100% - height_of_your_footer); } 

La seule exigence est que vous devez avoir un pied de page de hauteur fixe.

Par exemple pour cette mise en page:

  
your main content
your footer content

vous avez besoin de ce CSS:

 html, body { height: 100%; } main { min-height: calc(100% - 2em); } footer { height: 2em; } 

Essaye ça:

 body{ height: 100%; } #content { min-height: 500px; height: 100%; } #footer { height: 100px; clear: both !important; } 

L’élément div sous le div du contenu doit être clear:both .

Vous pouvez essayer ceci: http://www.monkey-business.biz/88/horizontal-zensortingertes-100-hohe-css-layout/ C’est 100% de hauteur et le centre horizontal.

juste partager ce que j’ai été utilisé et fonctionne bien

 #content{ height: auto; min-height:350px; } 

Comme mentionné dans la réponse d’Afshin Mehrabani, vous devez définir la hauteur du corps et du HTML à 100%, mais pour obtenir le pied de page, calculez la hauteur du wrapper:

 #pagewrapper{ /* Firefox */ height: -moz-calc(100% - 100px); /*assume ie your header above the wrapper is 80 and the footer bellow is 20*/ /* WebKit */ height: -webkit-calc(100% - 100px); /* Opera */ height: -o-calc(100% - 100px); /* Standard */ height: calc(100% - 100px); }