100% de la hauteur minimale de la disposition CSS

Question

Quelle est la meilleure façon de faire en sorte qu'un élément d'une hauteur minimale de 100 % traverse une zone de texte ? large éventail de navigateurs ?

En particulier, si vous avez une mise en page avec un header y footer de fixe height ,

comment faire pour que la partie centrale du contenu se remplisse 100% de l'espace intermédiaire avec le footer fixé au fond ?

Answer 1

J'utilise la suivante : Mise en page CSS - 100 % de hauteur

Hauteur minimale

L'élément #container de cette page a une hauteur minimale de 100 %. Cela Ainsi, si le contenu nécessite une hauteur supérieure à celle de la fenêtre d'affichage, la hauteur du #contenu oblige le #container à s'allonger également. Les éventuelles colonnes du #contenu peuvent alors être visualisées avec un arrière-plan 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 de telles colonnes. les éléments physiques pour créer un tel effet visuel. Si vous n'êtes pas Si vous n'êtes pas encore convaincu, pensez à des lignes ondulées et des gradients lignes droites et à des schémas de couleurs simples.

Positionnement relatif

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

Padding-bottom

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

Réduisez un peu la taille du texte ou redimensionnez la fenêtre de votre navigateur pour tester cette la 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;
}

Cela fonctionne bien pour moi.

Answer 2

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>

Answer 3

Voici une autre solution basée sur vh o viewpoint height Pour plus de détails, visitez Unités CSS . Il est basé sur ce qui suit solution qui utilise flex à la place.

* {
    /* 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. En fait, chaque unité est égale à 1 % de la taille de la fenêtre d'affichage. Ainsi, lorsque la fenêtre d'affichage change, le navigateur calcule cette valeur et l'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

Answer 4

La réponse de kleolb02 semble assez bonne. Une autre solution consisterait à combiner les éléments suivants pied de page adhésif et le hauteur minimale

Answer 5

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

Malheureusement, vous devrez recourir à une solution JavaScript pour obtenir le comportement souhaité. Pour ce faire, vous devez calculer la hauteur souhaitée pour votre contenu. <div> et la définir 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 comme un gestionnaire pour les éléments suivants onLoad y onResize événements :

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