Retour à Forum de site web

CSS: hauteur calculée est de 0

  • developer
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Oct 06, 2009
  • Messages: 5
  • Status: Offline

Message Octobre 6th, 2009, 1:17 pm

Bonjour,

Au code suivant, pourquoi est calculé à la hauteur de 0, comme affiché dans Google Chrome ou Opera Dragonfly, de la div avec id = "corps"? Shouldnt la hauteur calculée soit la hauteur maximale des éléments enfant qui, dans ce cas est l'div avec id = "leftTalls" (pour lesquelles la hauteur calculée est non 0)? Ive ci-joint un zip avec le code HTML et des images (ce sont des images couleur unie).

Merci à l'avance.

Code: [ Select ]
<html>
<head>
<style type="text/css">
#parent
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    height: 90px;
}

#wide
{
    float: right;
}

#body
{
    position: relative;
    top: 10px;
}

#leftTalls
{
    float: left;
    width: 160px;
}

#leftTallTop
{
}

#leftTallBottom
{
    position: relative;
    top: 10px;
}

#rightRects
{
    float: right;
    width: 300px;
}

#rightRectTop
{
}

#rightRectBottom
{
    position: relative;
    top: 10px;
}
</style>
</head>

<body>

<div id="parent">
    <div id="header">

        <div id="wide">
            <img src="a.png"/>
        </div>
    </div>
        
    <div id="body">
        <div id="leftTalls">
            <div id="leftTallTop">
                <img src="b.png"/>
            </div>

            <div id="leftTallBottom">
                <img src="b.png"/>
            </div>
        </div>

        <div id="rightRects">
            <div id="rightRectTop">
                <img src="c.png"/>
            </div>
            <div id="rightRectBottom">
                <img src="c.png"/>
            </div>
        </div>

    </div>
</div>
</body>

</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #parent
  5. {
  6.     width: 1000px;
  7.     margin-left: auto;
  8.     margin-right: auto;
  9. }
  11. #header
  12. {
  13.     height: 90px;
  14. }
  16. #wide
  17. {
  18.     float: right;
  19. }
  21. #body
  22. {
  23.     position: relative;
  24.     top: 10px;
  25. }
  27. #leftTalls
  28. {
  29.     float: left;
  30.     width: 160px;
  31. }
  33. #leftTallTop
  34. {
  35. }
  37. #leftTallBottom
  38. {
  39.     position: relative;
  40.     top: 10px;
  41. }
  43. #rightRects
  44. {
  45.     float: right;
  46.     width: 300px;
  47. }
  49. #rightRectTop
  50. {
  51. }
  53. #rightRectBottom
  54. {
  55.     position: relative;
  56.     top: 10px;
  57. }
  58. </style>
  59. </head>
  61. <body>
  63. <div id="parent">
  64.     <div id="header">
  66.         <div id="wide">
  67.             <img src="a.png"/>
  68.         </div>
  69.     </div>
  70.         
  71.     <div id="body">
  72.         <div id="leftTalls">
  73.             <div id="leftTallTop">
  74.                 <img src="b.png"/>
  75.             </div>
  77.             <div id="leftTallBottom">
  78.                 <img src="b.png"/>
  79.             </div>
  80.         </div>
  82.         <div id="rightRects">
  83.             <div id="rightRectTop">
  84.                 <img src="c.png"/>
  85.             </div>
  86.             <div id="rightRectBottom">
  87.                 <img src="c.png"/>
  88.             </div>
  89.         </div>
  91.     </div>
  92. </div>
  93. </body>
  95. </html>
Attachments:
help.zip

(1.84 Kio) Téléchargé 118 fois

  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Octobre 6th, 2009, 1:17 pm

  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Octobre 6th, 2009, 1:50 pm

le flotteur sur #leftTalls elle supprime la page du flux et donc de calcul de la hauteur.

mettre une div au bas de votre corps avec un style clair: à la fois, ce qui devrait forcer le conteneur à atteindre la bonne hauteur.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • developer
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Oct 06, 2009
  • Messages: 5
  • Status: Offline

Message Octobre 6th, 2009, 5:58 pm

Merci pour la réponse rapide.

J'ai ajouté la balise div suivante comme un enfant des "pare pas de" tag:
Code: [ Select ]
    <div id="footer" style="clear: both; height: 30px;">
    </div>
  1.     <div id="footer" style="clear: both; height: 30px;">
  2.     </div>


La hauteur calculée de la div avec id = "corps" est toujours 0. Le bas de page au bas de la page, mais il se confond avec l'élément le plus bas dans la balise BODY, la div avec id = "leftTallBottom".
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Octobre 6th, 2009, 6:13 pm

la div clair doit être au coeur de la div corps comme le dernier élément. En passant comment allez-vous essayer d'obtenir la hauteur?
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • developer
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Oct 06, 2009
  • Messages: 5
  • Status: Offline

Message Octobre 6th, 2009, 6:34 pm

Merci, c'était ça. Je reçois la hauteur en allant dans la console JavaScript en chrome et en cliquant sur les div et les visualiser ensuite de la hauteur sous "Computed Style". Dragonfly a quelque chose de similaire.

Toutefois, je remarque encore que les chevauchements pied de page avec la div corps. En outre, la div corps ne couvrent pas la totalité du bloc, quand je mets en valeur la div corps en Chrome, la hauteur est un peu inférieure à la hauteur de la "leftTalls". Pour cette raison, les chevauchements pied de page avec le corps.
  • developer
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Oct 06, 2009
  • Messages: 5
  • Status: Offline

Message Octobre 6th, 2009, 9:26 pm

Il semble que la hauteur calculée de la div corps ne prend pas en compte la séparation de 10 pixels entre leftTallTop et leftTallBottom. Tant les images qu'elles renferment sont élevés 600px. Depuis ils se combinent pour être le plus grand élément enfant de l'div corps, la hauteur calculée est 1200px. J'avais fait le positionnement relatif de leftTallBottom à 10px ci-dessous leftTallTop; Cependant, la hauteur calculée est encore 1200px. Les deux Opera et Chrome présentent le même comportement.
J'ai dû faire le positionnement relatif du pied de page pour être 20px afin de le placer directement sous le corps.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Octobre 6th, 2009, 10:09 pm

glad you got figured it out.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • developer
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Oct 06, 2009
  • Messages: 5
  • Status: Offline

Message Octobre 7th, 2009, 6:31 am

Au lieu de leftTallBottom positionnement 10px ci-dessous leftTallTop, j'ai placé un div avec height: 10px entre les deux. Maintenant, la hauteur calculée de la div corps est correcte, 1210px. Toutefois, le pied encore partiellement double emploi avec div corps. Afin de placer le pied directement en dessous de la div corps, j'ai dû placer le div avec height: 10px entre le corps et le pied au lieu de positionnement du corps 10px ci-dessous en-tête.
À mon avis, le SSI devrait prendre en compte le positionnement des éléments de hauteur / largeur de calculs.

[modifier]
Afin de placer le pied directement en dessous de la div corps, j'ai dû placer le div avec height: 10px entre le corps et tête au lieu de positionnement du corps 10px ci-dessous en-tête.
  • mk27
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Juin 09, 2009
  • Messages: 334
  • Status: Offline

Message Octobre 7th, 2009, 7:37 am

developer a écrit:
À mon avis, le SSI devrait prendre en compte le positionnement des éléments de hauteur / largeur de calculs.


Je ne pense pas que les concepteurs du CSS ont été en mesure de demander ce qu'ils veulent car tel quel, ils n'ont pas nécessairement encore obtenu ce qu'ils ont déjà demandé. Navigateur design est un gros problème ici - N'oubliez pas de vérifier des choses comme cela sur au moins deux produits, Firefox et IE, sauf si vous voulez un réveil brutal à un certain point.
Image

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 9 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 140 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC