Comment faire un div remplir le remaning espace vertical à l'aide de css

Je cherche à faire un site web standard de mise en page avec un en-tête, un barre de navigation un corps (sur la droite de la barre de navigation) et un pied de page.

Maintenant, j'ai jusqu'à présent fait:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">

            .header {
                float: top;
                width: 100%;
                height: 75px;
            }

            .navbar {
                float: left;
                width: 20%;
                height: 100%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }

            .body {
                float: right;
                width: 80%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }
            .footer {
                float: bottom;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="header"> Header </div>
        <div class="navbar"> Nav Bar </div>
        <div class="body"> Body </div>
        <div class="footer"> Footer</div>
    </body>
</html>

qui produit ce:

Comment faire un div remplir le remaning espace vertical à l'aide de css

Maintenant, si nous vérifions le CSS:

.navbar {

    float: left;
    width: 20%;
    height: 100%;
    min-height: 100%;
    overflow: scroll;
}

.body {
    float: right;
    width: 80%;
    height: 100%;
    min-height: 100%;
    overflow: scroll;
}

Comme vous pouvez le voir j'ai essayé de définir le hauteur et min-height à la fois le corps et de la barre de navigation à remplir tout l'espace vertical-je.e:

Comment faire un div remplir le remaning espace vertical à l'aide de css

Pourtant, elle n'affecte pas. Cependant, si je ne height: 500px il redimensionne comme prévu (bien sûr, maintenant ce ne sera pas très bonne pratique de différentes tailles d'écran etc serait montrer une autre partie ou d'affichage de la page):

Comment faire un div remplir le remaning espace vertical à l'aide de css

Donc, fondamentalement, je me demande comment pourrais-je être en mesure de faire la divs remplir l'espace vertical qui reste sans recours à la valeur codée en dur je.e 100px plutôt je voudrais le faire dans les pourcentages ainsi, la page s'affichera de la même manière sur tous les navigateurs

vous pouvez utiliser display:table-cell, mais il ne sera pas en charge de merde IE 7 ou moins. Sinon, le redoutable <table> est un remplacement possible pour les divs. C'est la compatibilité vs sémantique.
Im genre de mauvaise humeur en HTML pour être honnête, et j'ai cherché mais je ne trouve pas exactement quoi faire. une autre question, dit-JQuery mais je ne veux pas ajouter plus de dépendance (comme je le fais en XHTML et PHP)...
Je vois bien Im visant la compatibilité d'où le divs... mais je ne peux pas trouver de solution pour un problème qui à mon avis pourrait être résolu par height:100%?!?
eh bien, la vraie réponse est "vous ne pouvez pas remplir tout l'espace vertical en CSS". C'est pourquoi vous ne trouverez probablement pas une bonne solution. Vous trouverez javascript hacks et bizarre css combinaisons qui essaie de résoudre une partie du problème.

OriginalL'auteur David Kroukamp | 2013-04-10

  1. 5

    ajouter ce code à votre corps,html:

    body,html{
  height:100%;
}

    et faire de votre barre de navigation <div id="navbar"> au lieu de <div class="navbar">
    puis ajouter de la hauteur: 100%; à votre barre de navigation

    #navbar{
  height:100%
//rest of your code
}

    Même à votre contenu
    appeler quelque chose comme le contenu, car le corps est déjà utilisé.

    #content{
  height:100%
//rest of your code
}

    maintenant tous les divs auront une hauteur de 100% de sorte que le navigateur hauteur.

    EDIT: ton code devrait ressembler à ceci:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">

            html, body{
                padding: 0;
                margin: 0 auto;
                height: 100%;
            }

            #header {
                width: 100%;
                height: 75px;
            }

            #navbar {
                float: left;
                width: 20%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }

            #content {
                float: right;
                width: 80%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }
            #footer {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="header"> Header </div>
        <div id="navbar"> Nav Bar </div>
        <div id="content"> Body </div>
        <div id="footer"> Footer</div>
    </body>
</html>
    regarde mon edit 🙂 je viens de faire le code pour vous.
    et .body sont différents, mais pour la sémantique, il fait sens pour éviter de reproduire le nom de la balise comme un nom de classe.
    content d'avoir pu aider et merci @AramKocharyan pour pointer vers lui 🙂
    float: top; ?
    Il n'y a pas une telle chose comme float: top et float: bas.

    OriginalL'auteur Kees Sonnema

  2. 3

    Il me semble que vous essayez de mettre en œuvre un CSS collant pied de page - de sorte que votre pied de page est toujours en bas et le contenu semble pour remplir le reste de la page.

    OriginalL'auteur wojtiku

  3. 1

    Utiliser le positionnement absolu pour chaque bloc de contenu (en-tête, pied de page, sideber, corps), et pour le corps et nav-bar vrd, définie à la fois en haut et en bas des propriétés de position, plutôt que de spécifier la hauteur de la propriété. Cela va les forcer à remplir la dernière fenêtre d'affichage de la hauteur.

    Plus de détails ici

    ...et pour soutenir IE5 et IE6, voici une version améliorée en utilisant uniquement CSS (sans javascript).

    Il convient de noter que cette réponse ne fonctionne que si votre en-tête et pied de page sont statiques, en raison du fait que vous utilisez un positionnement absolu. Si vous avez envie de faire la même chose à l'aide de la variable de la hauteur de l'en-tête et pied de page, cette méthode ne fonctionnerait pas. Vous devez modifier le haut et le bas des valeurs à l'aide de javascript.

    OriginalL'auteur Doin