intérieure div doit être de 100% de la hauteur

Voici mon code HTML:

<div id="container">
    <div id="left-container">
    </div>

    <div id="right-container">
    </div>
</div>

Le conteneur est de 100% de la hauteur (je l'ai vérifié avec Firebug). Mais le #left_container doit être 100% aussi, et il n'est pas!

Ci-dessous est mon CSS et un capture d'écran. Le jaune doit être de 100%. Le jaune est le fond de la #left-container

html, body {
    height: 100%;
}
#container {
    position:relative;
    margin: 0 auto;
    width: 100%;
    height:100%;
    height: auto !important;
    min-height:100%;
    background: #fff;
}
#left-container {
    width: 300px;
    background: #ff0;
    height:100%;
    height: auto !important;
    min-height:100%;
}
InformationsquelleAutor Stijn Leenknegt | 2011-10-21
  1. 7

    Cet article traite à la fois du problème et de la solution en détail:

    http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

    Cela peut aider aussi:

    <style>
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

    Voir ici pour plus de détails sur la ci-dessus:

    Comment faire un div flottant 100% de la hauteur de son parent?

    • Mon œil est crispation sur votre utilisation de guillemets simples dans votre code HTML... sauf que c'est peut-être juste moi un clin d'œil dans l'approbation de plus de la façon dont vous subtilement ajouté un espace unique dans le #css externe, de sorte que les deux lignes sont exactement de la même largeur. Je suis tellement déchiré.
    InformationsquelleAutor James Johnson
  2. 0

    La meilleure façon d'aborder ce problème est de penser hors de la boîte un peu. Il n'y a pas de raison que les deux conteneurs doivent tendre vers les 100% si vous êtes juste une question, à propos de l'arrière-plan qui s'étend sur deux d'entre eux. Il y a une technique très simple appelé Faux Colonnes dans lequel vous combinez les décors pour les deux encadrés dans une seule image de fond, et de définir le conteneur principal de l'arrière-plan de l'image. Quand une longue barre latérale s'étend le conteneur principal, il fait descendre l'arrière-plan pour les deux barres latérales.

    InformationsquelleAutor Wex
  3. -3

    Vous devriez être en mesure d'utiliser

    margin:0;
padding:0;
height:100%;

    Pour la conatainers pour obtenir ce que vous voulez.

    InformationsquelleAutor Matt H