Question

Prenez cette page par exemple, est-il possible d'insérer un enfant dans mydiv telle qu'elle provoquera la hauteur de mydiv de croître au-delà de 500px?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <!-- place content here -->
    </div>
</body>
</html>


Je ne peux pas trouver quelque chose qui va. Par exemple, cette situation ci-dessous, je l'ai dit innerDiv à 100% en hauteur. Il trouvera son parent est 500px de hauteur, et donc aussi être 500px de hauteur. Le résultat net est que le contenu est 800px de hauteur, et le contenu se répand au-delà mydiv, avec mydiv encore un grand 500px fidèle:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <img src="myimage.jpg" width="400" height="300" />
        <div style="width:100%;height:100%;background:yellow">
            hi
        </div>
    </div>
</body>
</html>

IE en cours d'exécution en mode Quirks provoquera mydiv de grandir pour accueillir ses enfants dans de nombreuses situations. Il semble mode standard ne sera pas explicitement croître. Est-ce toujours le cas?

Je teste ceci principalement dans IE8 et FF3.5 sous Windows, avec IE8 en cours d'exécution dans tous ses modes possibles.

Était-ce utile?

La solution

Non: en mode standard, la propriété par défaut overflow d'un conteneur doit être réglé sur visible ce qui signifie que le contenu déborde sera rendu en dehors de la zone de coupe du conteneur. Il n'y a pas cette option overflow pour développer la taille du conteneur pour correspondre à ses enfants. Vous pouvez voir plus en cas de débordement

Cependant, il existe des méthodes de plus en plus le récipient pour correspondre à la taille de ses enfants. En mode standard, la bonne façon de le faire est de définir la propriété CSS min-height au lieu de la height propriété.

Depuis la Hauteur application comportement ne se produit pas dans IE6, les gens finissent par mettre généralement à la fois min-height pour les navigateurs conformes aux normes, puis soit height fixé pour IE uniquement avec et un rapide Google / recherche Bing pour min-height IE6 vous donnera toutes les réponses dont vous avez besoin.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top