height 100% y firefox

kayetano · #1 (**permalink**) 30/11/2005, 11:56

Hola a todos

Tengo el siguiente problema, he creado el siguiente css:

Código:

html, body {height:100%;}

div#tablaprincipal {
    position:relative;
    height:100%;
    background-color:#FFFFFF;
    width:770px;
    margin-left: auto;
    margin-right: auto;
}

div#tablaprincipal div#menu {
	position:relative;
	background-color:#FFFFFF;
	width:770px;
	border: 0px;
}
div#tablaprincipal div#lateral {
	position:relative;
	float:left;
	width:203px;
}
div#tablaprincipal div#contenido {
	position:relative; 
	float:left;
	width:567px;
}

div#tablaprincipal div#pie {
	position:relative; 
	float: right;
	width:567px;
}

En IE funciona correctamente, pero en FF la "tablaprincipal" con fondo blanco solo ocupa el tamaño de la ventana y si mi texto suepera ese tamaño queda fuera del recuadro con fondo blanco que esta con height a 100%.

He probado a poner

Código:

<div style="clear: both">

al final de todas las capas, pero nada, para FF el 100% es el tamaño de la ventana.

Alguien tiene una solucion a este problema.

baccxus · #2 (**permalink**) 30/11/2005, 13:49

Lo edito todo el post:

Todo tu código se reduce a esto:

Código:

#tablaprincipal {
	position:relative;
	background-color:#FFFFFF;
	width:770px;
	margin: 0 auto;
}

#menu {
	width:100%;
}
#lateral {
	float:left;
	width:25%;
}
#contenido {
	float:left;
	width:75%;
	/margin-right: -1px;/*Internet explorer */
}

#pie {
	clear: both;
	width:100%;
}

Por último, "heigth: 100%" se usa dentro de una división con tamaño previamente establecido.

Tu HTML

Código HTML:

<body>
<div id="tablaprincipal">
  <div id="menu">...</div>
  <div id="lateral">...</div>
  <div id="contenido">...</div>
  <div id="pie">...</div></div>
</body>

Saludos,

kayetano · #3 (**permalink**) 01/12/2005, 03:39

Hola

Gracias por tu respuesta, por lo visto el problema era el height:100% en "tablaprincipal", a sido quitarselo y todo ok. MUCHAS GRACIAS.

Una duda, cuando pones

Código:

/margin-right: -1px;/*Internet explorer */

la primera barra "/" es una errata?? y esto que hace en IE ??, he probado a ponerlo y quitarlo y en IE no veo ningún cambio.

baccxus · #4 (**permalink**) 01/12/2005, 08:26

/ es solo para explorer, porque en este la división "contenido" hacia un salto de linea, entonces para evitarlo se lo puse, aparte de que lo probé en varios monitores a distintas resoluciones y en 2 de ellos me pasó el salto de linea.

Saludos