Foros del Web » Creando para Internet » CSS »

height 100% y firefox

Estas en el tema de height 100% y firefox en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 30/11/2005, 11:56
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 12 años, 8 meses
Puntos: 0
height 100% y firefox

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.
__________________
Salu2
KAYETANO
  #2 (permalink)  
Antiguo 30/11/2005, 13:49
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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,
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 30/11/2005 a las 14:18
  #3 (permalink)  
Antiguo 01/12/2005, 03:39
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
__________________
Salu2
KAYETANO
  #4 (permalink)  
Antiguo 01/12/2005, 08:26
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
/ 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
__________________
Al final del día hablar es gratis, codificar no lo es
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:49.