web-dev-qa-db-fra.com

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

Dans le balisage présenté ci-dessous, j'essaie de faire en sorte que la div de contenu s'étire jusqu'au bas de la page, mais ne l'étend 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 pas de 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;
}
csshtmlborder
179
Vince Panuccio

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

html,body { height:100%; }

Vous devrez peut-être également ajuster le remplissage et les marges, mais vous obtiendrez 90% du chemin. Si vous avez besoin de le faire fonctionner avec tous les navigateurs, vous devrez vous en occuper un peu.

Ce site a 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 à http://quirksmode.org/

107
Jason Hernandez

J'essaierai de répondre directement à la question 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’ya pas assez de contenu pour remplir la fenêtre de visualisation verticale du navigateur disponible:

Démo à (faites glisser la poignée du cadre pour voir l’effet): http://jsfiddle.net/NN7ky
(avantage: 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 trop sommeil

41
Gima

Essayez de jouer avec la règle css suivante:

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

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

16
Kevin Read

vous pouvez le pirater un peu avec la déclaration min-height

<div style="min-height: 100%">stuff</div>
6
Owen

Essayez la solution "Sticky Footer" de Ryan Fait,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Fonctionne avec IE, Firefox, Chrome, Safari et soi-disant Opera aussi, mais ne l’a pas testé. C'est une excellente solution. Très facile et fiable à mettre en œuvre.

4
Anjisan

La propriété min-height n'est pas prise en charge par tous les navigateurs. Si vous avez besoin que votre contenu contienne des pages plus longues, la propriété height le raccourcira.

C'est un peu un hack, mais vous pouvez ajouter une div vide avec une largeur de 1px et une hauteur de, par exemple. 1000px dans votre #content div. Cela forcera le contenu à atteindre au moins 1 000 pixels de haut tout en permettant au contenu plus long d’étendre la hauteur au besoin

3
Gene

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

<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>
3
Adam Franco

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;
}
3
David Horák

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 n'ai pas encore testé ...

3
Steph

Je pense que le problème serait résolu en remplissant le html à 100% également, le corps pourrait remplir le 100% du html, mais le html ne remplit pas 100% de l'écran.

Essayez avec:

html, body {
      height: 100%;
}
1
David Marciel

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

Le lien ci-dessus est en panne, mais ce lien https://stackoverflow.com/a/18066619/194464 est ok. :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>
1
Vinicius José Latorre

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 supporté 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;
}
0
Nico

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.

0
Alexander Morland

Vous pourriez aussi aimer ceci: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

Ce n'est pas tout à fait ce que vous avez demandé, mais cela pourrait également convenir à vos besoins.

0
Dan

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

height: 100%;

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

Javascript est la solution la plus simple pour tous les navigateurs, bien que comme mentionné, ce ne soit pas une solution propre ou belle.

0
Martin

Selon le fonctionnement de votre mise en page, vous pouvez vous contenter de définir l’arrière-plan de l’élément <html>, qui correspond toujours au moins à la hauteur de la fenêtre.

0
user42092