ajuster la hauteur de la "div" en fonction du conteneur

Comment puis-je faire pour le "div-3" dans le conteneur sont ajustés pour la hauteur que cela a.ajuster la hauteur de la "div" en fonction du conteneur

J'ai besoin de l'ajustement le haut "div-3" laissé par div 1 et 2, quel que soit le contenu de cette div-3 incomplète.

Il est possible que div 1 ou div 2 ne s'affichent pas (affichage: aucun).

Code Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<style> 
.container{ 
    height:300px; 
    overflow:hidden; 
    width:500px; 
} 
.container div{ 
} 
.div-1{ 
    background-color:#009966; 
} 
.div-2{ 
    background-color:#999999; 
} 
.div-3{ 
    background-color:#3399FF; 
} 

</style> 
</head> 
<body> 
<div class="container"> 
    <div class="div-1">g f erg erg erg rga f erg erg erg rga</div> 
    <div class="div-2"> 
     sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sf erg erg erg rgadf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br /> 
    </div> 
    <div class="div-3">b gf erg erg erg rga</div> 
</div> 
</body> 
</html>

Source

2009-10-28 andres descalzo

Pourriez-vous, s'il vous plaît, reformuler votre question? Que voulez-vous dire par votre dernière phrase? –

Je ne suis pas tout à fait sûr de ce que vous demandez. Mais, si dans votre CSS, au lieu d'utiliser la hauteur, utilisez min-height, si votre contenu div est inférieur à la hauteur spécifiée, il forcera toujours le 300px, et s'il est plus grand, il s'ajustera automatiquement.

par exemple.

.container{ 
    min-height:300px; 
    overflow:hidden; 
    width:500px; 
}

Si vous essayez de vous assurer que tous vos divs montrer, vous pourrait essayer de définir un attribut max-height dans les styles div.

par exemple.

.div-3{ 
    background-color:#3399FF; 
    max-height: 200px; 
}

Source

2009-10-28 20:07:54 kafuchau

http://reference.sitepoint.com/css/min-height –

IIRC, IE6 ne prennent pas en charge min-height et max-height. (IE6 a encore beaucoup d'utilisateurs.) Mais je pense que vous pouvez utiliser l'astuce ici pour résoudre ce problème. http://blog.whirix.com/2008/11/cross-browser-min-height-ie6-and-others.html – Nosredna

Merci pour le conseil. – kafuchau

ajuster la hauteur de la "div" en fonction du conteneur

Répondre

Questions connexes