Diviser la page html en deux rangées de 50% de la hauteur
Je tiens à avoir la page html divisé en deux rangées de 50% chacun. Pour cela, j'ai fait deux divs avec comme row1 et row2 et de définir leur hauteur:50% en css.
Row1 a plus de 3 divs en elle et la ligne 2 a 2 plus de divs. Je veux que si ces intérieure divs sont assez grands pour être logés dans 50 hauteur que les barres de défilement doit venir dans leur rang respectif divs mais row1 et row2 doit rester à occuper 50% de l'écran.
Contenu de mon code HTML est:
<div class="row" id="row1">
<div class="dragbox" id="item1" >
<h2 class="dragbox-h2">Handle 1</h2>
<div class="dragbox-content" >
Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl.
</div>
</div>
<div class="dragbox" id="item2" >
<h2 class="dragbox-h2">Handle 2</h2>
<div class="dragbox-content" >
Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl.
</div>
</div>
<div class="dragbox" id="item3" >
<h2 class="dragbox-h2">Handle 3</h2>
<div class="dragbox-content" >
Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare.
</div>
</div>
</div>
<div class="row" id="row2" >
<div class="dragbox" id="item4" >
<h2 class="dragbox-h2">Handle 4</h2>
<div class="dragbox-content" >
Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper.
</div>
</div>
<div class="dragbox" id="item5" >
<h2 class="dragbox-h2">Handle 5</h2>
<div class="dragbox-content" >
Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna.
</div>
</div>
</div>
Extrait de css:
.row{
height:50%;
background:#fff;
overflow-y:auto;
}
.row .dragbox{
margin:5px 2px 20px;
background:#fff;
border:1px solid #ddd;
}
Comment puis-je m'assurer que si le contenu de l'intérieur de la balise augmentation puis aussi ligne-divs en tenir à leur 50% affectés à la hauteur.
Grâce.
OriginalL'auteur Harshdeep | 2012-07-01
Vous devez vous connecter pour publier un commentaire.
Vous devez vous assurer que le parent nœuds au-dessus de la ligne d'en-divs sont de prendre jusqu'à 100% eux-mêmes:
(Pourcentage hauteurs hériter de leur de hauteur de la base de leur parent.)
Va gérer la situation décrite dans la dernière phrase de la question?
Merci 🙂
Harshdeep — Pas de problème 🙂 @Jared — oui, il doit, essayer sur le JS Fiddle lien ci-dessus.
OriginalL'auteur anotherdave