réglage de la hauteur de DIV avec CSS dans le positionnement relatif

J'ai un code HTML + CSS qui veut mettre plusieurs DIVs. La disposition est comme ceci: toutes les DIV restent dans un DIV parent dont la taille est fixe. Ensuite, chaque enfant DIV doit rester sur sa propre ligne et utiliser la hauteur minimale pour dessiner son contenu. La dernière DIV devrait consommer toute la hauteur restante, de sorte que la DIV parente soit entièrement remplie.réglage de la hauteur de DIV avec CSS dans le positionnement relatif

Ce code montre mon approche en utilisant CSS float et clear propriétés:

<html> 
    <head> 
    <style> 
     <!-- 
     .container { 
     width: 500px; 
     height: 500px; 
     border: 3px solid black; 
     } 

     .top { 
     background-color: yellow; 
     float: left; 
     clear: left; 
     width: 100%; 
     } 

     .bottom { 
     background-color: blue; 
     height: 100%; 
     float: left; 
     clear: left; 
     width: 100%; 
     } 
    --> 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="top">top1</div> 
     <div class="top">top2</div> 
     <div class="top">top3</div> 
     <div class="top">top4</div> 
     <div class="bottom">bottom</div> 
    </div> 
    </body> 
</html>

Cependant, la dernière DIV déborde du parent. Je suppose que c'est à cause du width: 100%.

Est-il possible de résoudre ce problème? Je veux éviter de définir l'attribut overflow du parent, et aussi je dois éviter d'utiliser le positionnement absolu. Si d'une façon ou d'une autre je pourrais tromper la dernière DIV pour utiliser la hauteur du parent moins la somme de la hauteur des autres DIV.

Merci.

Source

2009-11-03 Gabriel

Il s'agit d'un positionnement flottant et non d'un positionnement relatif. – elzapp

Ajouter:

div.container { overflow: hidden; }

Ce n'est pas déborder car il est une largeur de 100%. Il déborde parce que c'est un flotteur et donc retiré de la disposition normale. La modification de la propriété de débordement modifie la façon dont le navigateur s'adresse aux flottants contenus.

Oh, et si ce n'est déjà fait, assurez-vous d'utiliser un DOCTYPE. Cela compte particulièrement pour IE.

Source

2009-11-03 09:57:45 cletus

Merci! Oui, mais cela masquera une partie du DIV inférieur, que je veux éviter. En principe, je peux aligner certaines choses au bas de la DIV bleue, et elles devraient aussi montrer. Ce que je voudrais, c'est étirer verticalement le DIV bleu. – Gabriel

réglage de la hauteur de DIV avec CSS dans le positionnement relatif

Répondre

Questions connexes