auto agrandir div hauteur

alt text http://www.freeimagehosting.net/uploads/a33d47cb87.jpg auto agrandir div hauteur

<html><head><title>Test</title> 
<style> 
.main{width:600px;border:1px solid red; } 
.main .left{background:lightblue; width:100px;clear:both; float:left;} 
.main .right{margin-left:100px;background:lightyellow; } 
</style> 
    </head><body> 
<div class="main"> 
    <div class="left"> 
    title 
    </div> 
    <div class="right"> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
    </div> 
</div> 
</body></html>

Comment changer le CSS pour rendre l'affichage de la page comme le montre dialogue? PS, je pense que c'est une façon de faire se dilater automatiquement la hauteur de la div "gauche" lorsque la hauteur de la div "div" ou de la div parente augmente, mais je ne sais pas comment.

Source

2010-04-14 Geln Yang

double possible de [CSS - Augmenter la hauteur de l'enfant DIV à la hauteur des parents] (http://stackoverflow.com/ questions/4804581/css-expand-enfant-div-hauteur-to-parents-height) – dynamic

J'ai une solution très simple. Utiliser l'attribut css display: table-cell; dans .left{} & .right{} style comme ceci:

.left, .right { 

     display: table-cell; 
     width:100px; 
     vertical-align:middle; 
     text-align:center; 

    }

Voir la démo: http://jsfiddle.net/rathoreahsan/qcCPG/3/

Source

2011-07-17 21:13:05

Merci! Cela fonctionne et il est nécessaire d'ajouter une définition DOCTYPE pour le document html. –

@Ahsan: Il ne fonctionnera pas dans les navigateurs webkit! – logan

Voici un style différent qui fonctionne tout à fait:

.main{width:600px;border:1px solid red; height:auto; position:relative } 
.main > div {display:inline-block; vertical-align:top; } 
.main .left{background:lightblue; width:100px; height: 100%; } 
.main .right{margin-left:5px; background:lightyellow; height: 100% }

Vous pouvez passer par ce CSS tutorials à W3Schools.

Source

2010-04-14 17:39:23 Pablo

Merci beaucoup, c'est un pas de plus vers ce que je veux. Espérons que ce sera comme si la hauteur de div droite est auto et augmente quand il y a plus de contenu, et la hauteur de la div gauche augmentera automatiquement pour être égale à la droite. –

Maintenant je comprends que la div'height gauche peut être augmentée automatiquement seulement quand la taille de div principale pourrait être calculée. –

auto agrandir div hauteur

Répondre

Questions connexes