Disposition CSS 100% hauteur minimale

Quelle est la meilleure façon de créer un élément d'une hauteur minimale de 100% sur une large gamme de navigateurs?

En particulier si vous avez une mise en page avec un headeret footerde fixe height,

Comment faire en sorte que la partie du contenu du milieu remplisse 100%l'espace entre les deux avec la partie footerfixe vers le bas?

J'utilise le suivant: Mise en page CSS - 100% hauteur

Min-hauteur

L'élément #container de cette page a une hauteur minimale de 100%. De cette façon, si le contenu nécessite plus de hauteur que ne le fournit la fenêtre, la hauteur de #content oblige le #container à devenir également plus long. Les colonnes possibles dans #content peuvent ensuite ê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) des éléments physiques pour créer un tel effet visuel. Si vous n'êtes pas encore convaincu; pensez à des lignes bancales et à des dégradés au lieu de lignes droites et de combinaisons de couleurs simples.

Positionnement relatif

Parce que #container a une position relative, #footer restera toujours en bas; puisque la hauteur minimale mentionnée ci-dessus n'empêche pas #container de se mettre à l'échelle, cela fonctionnera même si (ou plutôt surtout quand) #content force #container à devenir plus long.

Rembourrage en bas

Puisqu'il n'est plus dans le flux normal, padding-bottom de #content fournit maintenant l'espace pour le #footer absolu. Ce remplissage est inclus dans la hauteur de défilement par défaut, de sorte que le pied de page ne chevauche jamais le contenu ci-dessus.

Redimensionnez un peu la taille du texte ou redimensionnez la fenêtre de votre navigateur pour tester cette mise en page.

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 */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

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 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;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Les unités sont vw, vh, vmax, vmin. Fondamentalement, chaque unité est égale à 1% de la taille de la fenêtre. Ainsi, à mesure que la fenêtre change, le navigateur calcule cette valeur et s'ajuste en conséquence.

Vous pouvez trouver plus d'informations ici:

Plus précisément:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

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

Pour min-heightfonctionner correctement avec les pourcentages, tout en héritant de son nœud parent min-height, l'astuce serait de définir la hauteur du nœud parent sur 1px, puis l'enfant min-heightfonctionnera correctement.

Page de démonstration

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

Malheureusement, vous devrez recourir à une solution JavaScript afin d'obtenir le comportement souhaité. Cela peut être fait en calculant la hauteur souhaitée pour votre contenu <div>et en la définissant comme 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 comme gestionnaire pour les événements onLoadet onResize:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

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 voulez qu'elles remplissent l'espace pour rencontrer le pied de page, vous ne pouvez pas les définir à 100% car elles représenteront également 100% de la hauteur du parent. signifie que le pied de page finit par être abaissé lors de l'utilisation de la fonction d'effacement.

Pensez-y de cette façon si votre en-tête a une hauteur de 50px et que votre pied de page a une hauteur de 50px et que le contenu est juste ajusté automatiquement à l'espace restant, par exemple 100px, et que le conteneur de page est à 100% de cette valeur, sa hauteur sera de 200px. Ensuite, lorsque vous définissez la hauteur de la barre latérale à 100%, elle est alors de 200 px même si elle est censée s'ajuster parfaitement entre l'en-tête et le pied de page. Au lieu de cela, elle finit par être 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 comme effet en utilisant cette méthode à 100%. Je ne l'ai pas essayé dans d'autres navigateurs et je suppose que cela peut fonctionner dans certaines des autres options. mais ce ne sera pas universel.

Vous devez d'abord créer un divavec id='footer'après votrecontent div, puis simplement le faire.

Votre HTML devrait ressembler à ceci:

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

Et le CSS:

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

Essaye ça:

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

L' divélément sous le contenu div doit avoir clear:both.

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

Ce petit morceau de CSS fait "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 ayez besoin d'un pied de page à hauteur fixe.

Par exemple pour cette mise en page:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

vous avez besoin de ce CSS:

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

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

partagez simplement 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 de l'emballage:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. 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);
}