Comment définir un div pour utiliser un certain pourcentage de la hauteur, tout en utilisant overflow: automatique pour mettre une barre de défilement?

Je le code suivant:Comment définir un div pour utiliser un certain pourcentage de la hauteur, tout en utilisant overflow: automatique pour mettre une barre de défilement?

div.leftnav { 
    overflow: auto ; 
    height: 50% ; 
}

Ce, quand je mets un grand div de cette classe, ne fonctionne pas (il ne montre pas la barre de défilement ni redimensionnez à 50%, mais il fonctionne parfaitement si plutôt que si j'utilise

height: 400px ;

ou une autre valeur « absolue ».

Source

2010-12-07 Martín Fixman

hauteur ne fonctionnera que si l'élément parent a une instruction de hauteur ainsi.

Donc, dire que vous avez un balisage très simple:

<html> 
    <body> 
     <div class="leftnav"> 
      really long text 
     </div> 
    </body> 
</html>

Ensuite, le CSS suivant fonctionnera pour vous:

div.leftnav { 
    overflow: auto ; 
    height: 50%; 
} 
html, body { 
    height:100%; 
}

Vous devez avoir des instructions de hauteur tout le chemin bien. S'il manque une instruction de hauteur sur l'un des éléments parents, alors le 100% ne signifiera rien pour le div. Si vous ne pouvez pas accéder à tous les éléments dans l'arbre, alors vous aurez besoin d'un élément parent avec une hauteur fixe:

<div class="leftnav-container"> 
    <div class="leftnav"> 
     really long text 
    </div> 
</div>

Alors vous avez besoin de cette css:

div.leftnav { 
    overflow: auto ; 
    height: 50%; 
} 
div.leftnav-container { 
    height : 500px; 
}

Source

2010-12-07 16:54:29

le style Ajoutant à tous les parents les éléments ont bien fonctionné, merci – ProgramCpp

Comment définir un div pour utiliser un certain pourcentage de la hauteur, tout en utilisant overflow: automatique pour mettre une barre de défilement?

Répondre

Questions connexes