Hauteur fixe et hauteur de 100% dans le conteneur DIV

Question

J'essaie d'obtenir un div pour atteindre 100% de hauteur avec le fond de la barre de défilement encore visible, lorsqu'il est également contenu avec une hauteur fixe div. Quelqu'un peut-il m'aider s'il vous plaît :)

Lorsque vous utilisez la disposition ci-dessous, la barre de défilement verticale en bas de .div2 tombe de la hauteur du point de vue, je suppose que .div1 est 200px haute, en poussant div1 à être 100% de hauteur + 200px.

Y a-t-il un moyen pour que .div1 soit une hauteur fixe, et .div2 s'étend pour remplir la hauteur de fenêtre restante et déborder lorsque cette hauteur est atteinte.

Voici le CSS

html, body { 
     height: 100%; 
    } 
    body { 
     margin: 0; 
     padding: 0; 
     overflow:hidden; 
    } 
    .container 
    { 
     height:100%; 
    } 
    .leftContent { 
     left:0; 
     top:0; 
     padding:0; 
     width:250px; 
     height:100%; 
     color:white; 
     background:blue; 
     overflow:hidden; 
     border:blue solid; 
    } 
    .div1 
    { 
     height:200px; 
     background-color:black; 
     border: red solid; 
    } 
    .div2 
    { 
     overflow:scroll; 
     height:100%; 
     border:yellow solid; 
    } 

Et voici le code HTML.

<div id="container" class="container"> 
    <!-- Start Left Column--> 
    <div id="leftColumn" class="leftContent"> 
     <div id="div1" class="div1"> 
      CONTENT 
     </div> 
     <div id="div2" class="div2"> 
      START START START START START START START START START START START START START START START START 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
      END END END END END END END END END END END END END END END END END END END END END END END END 
     </div> 
    </div> 
    <!-- End Left Column--> 
</div> 

Très appréciée. Merci

Answer 1

Essayez cette configuration pour .div2

.div2 { 
    overflow:scroll; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    bottom: 0; 
    width: 250px; 
    border:yellow solid; 
} 

cette façon, vous placez .div2 droite sous .div1 avec le positionnement absolu et étendre sa largeur et la hauteur comme vous voulez (la largeur et la hauteur du conteneur)

modifier

IE bug peut être fixé en enveloppant le .div2 dans un autre div -><div><div class="div2"></div></div>

aussi essayer d'ajouter cette css à votre .leftContent déclaration

.leftContent { 
    /* other declarations */ 
    position: relative; 
    overflow: hidden; 
} 

Answer 2

Mise à jour le css suivant

.leftContent { 
    left:0; 
    top:0; 
    padding:0; 
    width:250px; 
    height:100%; 
    color:white; 
    background:blue; 
    overflow:hidden; 
    border:blue solid; 
    position:relative; 
} 
.div1 
{ 
    height:200px; 
    background-color:black; 
    border: red solid; 
    border-width:2px; 
} 
.div2 
{ 
    border-width:2px; 
    position:absolute; 
    top:204px; 
    bottom:2px; 
    overflow-y:scroll; 
    right:0px; 
    border:yellow solid; 
} 

Fait le parent contenu gauche il devient un élément positionné et est maintenant la bloc contenant pour les deux divs. Ceci est important pour permettre à div2 de remplir l'espace restant.

Définir le border-width explicitement afin que je sache où positionner div2 pour ne pas chevaucher la frontière de div1.

Fondamentalement utilisé le positionnement absolu pour obtenir div2 pour remplir l'espace restant dans leftContent avec spécifiant explicitement le positionnement. Si j'utilisais overflow j'obtiendrais une barre de défilement en bas qui ne défilerait pas alors pour m'en débarrasser j'ai utilisé overflow-y.