Volver al Foro de Diseño de páginas Web

CSS: altura calculada es 0

  • developer
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Oct 06, 2009
  • Mensajes: 5
  • Status: Offline

Nota Octubre 6th, 2009, 1:17 pm

Hola,

En el siguiente código, ¿por qué es la altura calculada 0, como se ve en Google Chrome u Opera Dragonfly, de la div con id cuerpo = ""? Shouldnt la altura se calcula la altura máxima de los elementos secundarios, que en este caso es el div con id = "leftTalls" (para los que calcula la altura no es 0)? Ive adjunto un zip con el código HTML y las imágenes (estas son las imágenes de color sólido).

Gracias de antemano.

Código: [ 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 KiB) 118 veces

  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Octubre 6th, 2009, 1:17 pm

  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Octubre 6th, 2009, 1:50 pm

el flotador en #leftTalls la quita de la página y por lo tanto el flujo de los cálculos de altura.

poner un div en la parte inferior de su cuerpo con un estilo claro: tanto, que debería obligar a los contenedores para crecer a la altura correcta.
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
  • Registrado: Oct 06, 2009
  • Mensajes: 5
  • Status: Offline

Nota Octubre 6th, 2009, 5:58 pm

Gracias por la respuesta rápida.

He añadido la etiqueta DIV siguiente como un niño de la "no pare" tag:
Código: [ Select ]
    <div id="footer" style="clear: both; height: 30px;">
    </div>
  1.     <div id="footer" style="clear: both; height: 30px;">
  2.     </div>


La altura calculada de la div con id cuerpo = "" sigue siendo 0. El pie de página se encuentra en la parte inferior de la página, pero se confunde con la mayoría de los elementos de fondo en el cuerpo de la etiqueta, la leftTallBottom div con id = "".
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Octubre 6th, 2009, 6:13 pm

el div claro debe estar dentro del div cuerpo como el último elemento. Por la forma en cómo se está tratando de obtener la altura?
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
  • Registrado: Oct 06, 2009
  • Mensajes: 5
  • Status: Offline

Nota Octubre 6th, 2009, 6:34 pm

Gracias, eso fue todo. Me da la altura al ir a la consola JavaScript en Chrome y hacer clic en el div y luego de ver la altura del bajo "computarizada Style". Dragonfly tiene algo similar.

Sin embargo, todavía cuenta de que los solapamientos pie de página con el div cuerpo. Además, el div cuerpo no abarca toda la manzana, cuando yo destacaría el div cuerpo en Chrome, la altura es un poco inferior a la altura de la "leftTalls". Debido a esto, las coincidencias pie de página con el cuerpo.
  • developer
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Oct 06, 2009
  • Mensajes: 5
  • Status: Offline

Nota Octubre 6th, 2009, 9:26 pm

Parece que la altura calculada del div cuerpo no tiene en cuenta la separación de 10 píxeles entre leftTallTop y leftTallBottom. Tanto las imágenes que encierran son altos 600px. Desde que se combinan para ser el elemento más alto de los niños del div cuerpo, la altura calculada es 1200px. Que había hecho la posición relativa de leftTallBottom a 10px por debajo de leftTallTop, sin embargo, la altura calculada es todavía 1200px. Tanto Opera y Chrome presentan el mismo comportamiento.
Tuve que tomar la posición relativa del pie de página que se 20px con el fin de colocarlo directamente debajo del cuerpo.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Octubre 6th, 2009, 10:09 pm

contento de que tengo planeado.
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
  • Registrado: Oct 06, 2009
  • Mensajes: 5
  • Status: Offline

Nota Octubre 7th, 2009, 6:31 am

En lugar de leftTallBottom posicionamiento 10px por debajo de leftTallTop, puse un div con height: 10px entre los dos. Ahora, calcula la altura del div cuerpo es correcta, 1210px. Sin embargo, el pie de página todavía parcialmente se superponen con div cuerpo. A fin de colocar el pie de página directamente debajo del div cuerpo, tuve que poner el div mismo con la altura: 10px entre el cuerpo y el pie en lugar de colocar el cuerpo 10px bajo el encabezado.
En mi opinión, CSS debe tener en cuenta el posicionamiento de elementos de altura / anchura de los cálculos.

[editar]
A fin de colocar el pie de página directamente debajo del div cuerpo, tuve que poner el div mismo con la altura: 10px entre el cuerpo y encabezado en lugar de colocar el cuerpo 10px bajo el encabezado.
  • mk27
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Jun 09, 2009
  • Mensajes: 334
  • Status: Offline

Nota Octubre 7th, 2009, 7:37 am

developer escribió:
En mi opinión, CSS debe tener en cuenta el posicionamiento de elementos de altura / anchura de los cálculos.


No creo que los diseñadores de CSS han sido capaces de pedir lo que quieras, ya que tal como está, que no necesariamente han llegado incluso lo que ya han solicitado. Diseño del navegador es un gran problema aquí - asegúrese de comprobar cosas como esta por lo menos en Firefox y Explorer a menos que desee un brusco despertar en algún momento.
Imagen

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 9 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 115 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC