Comment forcer un bloc DIV à s'étendre jusqu'au bas d'une page même s'il n'a pas de contenu?

190

Dans le balisage ci-dessous, j'essaie de faire en sorte que la division de contenu s'étire jusqu'au bas de la page, mais elle ne s'étire que s'il y a du contenu à afficher. La raison pour laquelle je veux faire cela est que la bordure verticale apparaît toujours en bas de la page même s'il n'y a aucun contenu à afficher.

Voici mon HTML :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

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

Et mon CSS :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css html border Le rasoir
la source
Que voulez-vous qu'il fasse s'il y a plus de contenu que de tenir sur la page? De quels navigateurs vous souciez-vous?
drs9222

Réponses:

116

Votre problème n'est pas que le div n'est pas à 100% de hauteur, mais que le conteneur qui l'entoure ne l'est pas.Cela aidera dans le navigateur que je suppose que vous utilisez:

html,body { height:100%; }

Vous devrez peut-être également ajuster le remplissage et les marges, mais cela vous permettra d'atteindre 90% du chemin. Si vous devez le faire fonctionner avec tous les navigateurs, vous devrez vous en occuper un peu.

Ce site contient d'excellents exemples:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Je recommande également d'aller sur http://quirksmode.org/

Jason Hernandez
la source
47
Cette solution n'est pas adaptée aux pages qui défilent.
jbranchaud
3
La propriété min-height en CSS devrait l'aider ... Je suppose
Alfabravo
1
Fait intéressant, cela a réglé mes problèmes de défilement au lieu de les causer
Alan Macdonald
Cela ne fonctionne pas pour moi dans la dernière version de chrome.
HelloWorldNoMore
49

Je vais essayer de répondre à la question directement dans le titre, plutôt que de vouloir coller un pied de page au bas de la page.

Faites en sorte que div s'étende au bas de la page s'il n'y a pas assez de contenu pour remplir la fenêtre de navigateur verticale disponible:

Démo à (faites glisser la poignée du cadre pour voir l'effet): http://jsfiddle.net/NN7ky
(à l'envers: propre, simple. Inconvénient: nécessite flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - ou j'ai juste trop sommeil

Gima
la source
14
Certains d'entre nous ont la chance de ne prendre en charge que les navigateurs "modernes", donc cela m'a été extrêmement utile. Merci Gima. J'ai essayé plusieurs façons de faire quelque chose comme ça mais c'était toujours cassé de différentes manières subtiles. Ceci est vraiment mieux. Je ne comprends toujours pas exactement pourquoi cela fonctionne de cette façon.
Chris Nicola
1
L'élément Flexbox essaie de diviser sa zone de contenu entre les éléments qu'il contient. La solution que j'ai proposée fonctionne par 1) refuser la réduction des divs, et 2) permettre la croissance de .div2. Par conséquent, les div ne rétrécissent pas pour masquer leur contenu, et seul .div2 est autorisé à se développer.
Gima
Cela résout donc le problème que j'avais dans Firefox, où le contenu était encore légèrement trop gros pour le navigateur. Malheureusement, dans Chrome, cela ne résout pas ce problème à lui seul. Cependant, la définition de la marge et du remplissage à 0 le fait également.
Michael Scheper
c'est la bonne réponse, min-height: 100% ne fonctionne que s'il n'y a plus rien dans le conteneur parent, et calc n'aide pas vraiment si le frère au-dessus de l'élément en expansion a une hauteur inconnue
zakius
Après des heures à lutter avec ce problème, c'est la seule solution qui l'a vraiment résolu pour moi. Il ne manque qu'une petite explication de ce que fait chaque partie. Mais de toute façon, merci beaucoup @Gima.
pylund
18

Essayez de jouer avec la règle css suivante:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Modifiez la hauteur en fonction de votre page. la hauteur est mentionnée deux fois pour la compatibilité entre navigateurs.

Kevin Lire
la source
cela fonctionne, mais j'ai trouvé que si j'augmente la hauteur min à plus de 600px, cela crée un défilement. Auriez-vous une idée pourquoi cela se produit?
Siddharth Patel
1
@SiddharthPatel Parce que le #content div déborde de son parent. Donc, définissez le parent du div #content pour qu'il ait un dépassement de capacité: auto ou overflow: valeur css cachée et il devrait se développer / déborder pour s'adapter, plutôt que de défiler. Il serait probablement préférable de poser de telles questions comme de nouvelles questions la prochaine fois plutôt que des commentaires :)
Colt McCormack
Après avoir essayé la méthode de chaque réponse, c'est la seule qui fonctionne. Même cela fonctionne parfaitement, car je dois ajuster la valeur de la hauteur pour qu'elle corresponde à la hauteur de la page, il faut donc peaufiner. Cependant, cela fonctionne également pour tous les navigateurs.
TARKUS
Merci beaucoup pour cette réponse. C'est simple et fonctionne bien sur plusieurs plates-formes. J'avais en fait utilisé cela avant sans m'en rendre compte il y a environ 1 an, j'aurais aimé pouvoir voter deux fois.
vedi0boy
6

vous pouvez en quelque sorte le pirater avec la déclaration min-height

<div style="min-height: 100%">stuff</div>
Owen
la source
3

La propriété min-height n'est pas prise en charge par tous les navigateurs. Si vous avez besoin que votre #contenu étende sa hauteur sur des pages plus longues, la propriété de hauteur la coupera court.

C'est un peu un hack mais vous pouvez ajouter un div vide avec une largeur de 1px et une hauteur de par exemple 1000px à l'intérieur de votre div #content. Cela forcera le contenu à avoir une hauteur d'au moins 1000 pixels et permettra toujours à un contenu plus long d'étendre la hauteur en cas de besoin.

Gène
la source
3

Bien qu'il ne soit pas aussi élégant que du CSS pur, un petit peu de javascript peut aider à accomplir ceci:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Adam Franco
la source
3

Essayer:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Je ne l'ai pas encore testé ...

Steph
la source
3

Pied de page collant à hauteur fixe:

Schéma HTML:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
David Horák
la source
2

Essayez http://mystrd.at/modern-clean-css-sticky-footer/

Le lien ci-dessus est en panne, mais ce lien https://stackoverflow.com/a/18066619/1944643 est correct. :RÉ

Démo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
Vinicius José Latorre
la source
1
@codemirror merci, je viens de modifier le commentaire avec un autre lien qui fonctionne.
Vinicius José Latorre
1

Vous pouvez utiliser l'unité de longueur "vh" pour la propriété min-height de l'élément lui-même et de ses parents. Il est pris en charge depuis IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
Nico
la source
Cela étend uniquement le div à la hauteur de la fenêtre, pas la page elle-même.
jansmolders86
1

Je pense que le problème serait résolu en faisant simplement remplir le html à 100% également, peut-être que le corps remplit 100% du html, mais le html ne remplit pas 100% de l'écran.

Essayez avec: 

html, body {
      height: 100%;
}
David Marciel
la source
0

Je n'ai pas le code, mais je sais que je l'ai fait une fois en utilisant une combinaison de hauteur: 1000px et margin-bottom: -1000px; Essayez ça.

Alexander Morland
la source
Wow, ça marche vraiment! Mais si le contenu déborde du conteneur, il n'est pas possible de voir la partie débordée ...
adripanico
0

En fonction du fonctionnement de votre mise en page, vous pouvez vous en sortir en définissant l'arrière-plan de l' <html>élément, qui correspond toujours au moins à la hauteur de la fenêtre.


la source
0

Il n'est pas possible d'accomplir cela en utilisant uniquement des feuilles de style (CSS). Certains navigateurs n'accepteront pas

height: 100%;

comme valeur supérieure au point de vue de la fenêtre du navigateur.

Javascript est la solution multi-navigateurs la plus simple, même si, comme mentionné, elle n'est ni propre ni belle.

Martin
la source
-2

Je sais que ce n'est pas la meilleure méthode, mais je ne pourrais pas le comprendre sans gâcher mes positions d'en-tête, de menu, etc. Alors ... J'ai utilisé une table pour ces deux colonnes. C'était une solution RAPIDE. Aucun JS nécessaire;)

Wen-D
la source
-2

Ce n'est ni la meilleure ni la meilleure implémentation des plus grands standards, mais vous pouvez changer le DIV pour un SPAN ... C'est une solution pas si recommandable mais rapide = P =)

Métafaniel
la source