CSS - Contenu apparaissant en dehors d'un div

Je rencontre des problèmes avec ma page Web. Une image descibes probablement mieux si elle est ici:CSS - Contenu apparaissant en dehors d'un div

http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png

Le texte en bas est censé être à l'intérieur de la zone blanche. Je veux que la div blanche change de hauteur en fonction du contenu. J'ai un div qui centre la zone blanche au milieu:

#mainContainer { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
    width: 800px; 
    min-height: 700px; 
    height: 100%; 
}

J'ai aussi mis en html et le corps à 100%. Mais le problème est que la div reste à 100%, quel que soit le contenu. Maintenant, une chose vraiment étrange se passe quand je mets la hauteur à auto:

http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png

Voici comment il devrait chercher (et comment il ne ressembleront en utilisant la hauteur: 100%):

http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png

The full page can be found here (cliquez sur "Om oss" pour voir la page avec le texte égaré)

Je serais vraiment reconnaissant si quelqu'un pouvait comprendre quel est le problème! :-)
(Espérons que le CSS et HTML est facile à comprendre)

Edit: Je viens de remarquer qu'il rend correctement dans Safari, mais pas dans Firefox.

Source

2010-09-02 Stian

Vous avez donné html et body une hauteur de 100%. (De nombreux enfants divs ont également hauteur: 100%.) Ce que cela signifie, c'est qu'ils sont 100% de la taille de la viewport, pas le contenu. IOW, ils sont limités par la hauteur de la fenêtre du navigateur, et tout contenu s'étendant en dessous sera hors des arrière-plans appliqués.

Edit: Pour élaborer davantage, vous avez mis en place les images de fond (ombres portées) à gauche et à droite sur divs vides que vous avez essayé d'étirer en utilisant la hauteur: 100%, mais comme ils ne contiennent rien, ils ne peuvent être que la hauteur des éléments parents, qui sont eux-mêmes la hauteur du veiwport. Lorsque vous définissez le html et le corps (ou tout autre élément intermédiaire) sur height: auto, ces divs (mainContainer-middle-left et -right) se réduisent à la taille de leur contenu, ce qui n'est rien.

Vous devriez probablement reconfigurer le html afin que ces éléments soient les parents du contenu réel et se débarrasser de toutes les instructions "height: 100%". Ils ne veulent pas dire ce que vous pensez qu'ils veulent dire!

Source

2010-09-02 17:51:11 Doug

Votre explication a du sens!On m'a toujours dit que vous devez définir html et body à 100% pour pouvoir définir les hauteurs sur divs. Est-ce que ceci s'applique seulement quand vous voulez placer la taille à un nombre spécifique de pixels? Quoi qu'il en soit, comment faire pour que les divs d'ombre portée s'étendent en hauteur sans utiliser la hauteur: 100%? – Stian

Peut-être, au lieu d'avoir deux divs différents qui ont les ombres portées gauche et droite, je pourrais avoir une image aussi large que nécessaire, et l'utiliser comme arrière-plan sur toute la partie du milieu. Il suffit de penser à haute voix: P – Stian

Tout div peut avoir un ensemble de hauteur de pixel, mais pour définir des hauteurs de pourcentage sur les divs, les éléments parents doivent également avoir une sorte de hauteur. Si vous y réfléchissez, définir une hauteur pour dire 50% pose la question "50% de quoi?" Si ce n'est que des pourcentages tout le long (body/html), le navigateur répond à la question avec "50% de la fenêtre". – Doug

Stian,

Pour la #mainContainer div, réglez la hauteur de l'auto.

Pour div # mainContainer-middle, réglez la hauteur sur 550px.

Cela devrait résoudre vos problèmes de mise en page.

Source

2010-09-02 17:12:35 Adam

Merci pour la réponse. Mais, hélas, votre suggestion ne résout pas le problème. Le div ne change toujours pas de taille en fonction de la quantité de contenu, donc s'il y a beaucoup de texte, il apparaîtra toujours en dehors de la div. :( – Stian

CSS - Contenu apparaissant en dehors d'un div

Répondre

Questions connexes