Foros del Web » Creando para Internet » CSS »

Problema con el height

Estas en el tema de Problema con el height en el foro de CSS en Foros del Web. Os cuento: Estoy haciendo una página que necesito que salga ocupando todo el espacio del navegador en resoluciones que van desde 800x600 hasta 1280x1024. En ...
  #1 (permalink)  
Antiguo 28/03/2007, 04:57
 
Fecha de Ingreso: diciembre-2003
Mensajes: 83
Antigüedad: 14 años
Puntos: 0
Problema con el height

Os cuento:
Estoy haciendo una página que necesito que salga ocupando todo el espacio del navegador en resoluciones que van desde 800x600 hasta 1280x1024. En cuanto al width ya lo tengo solucionado, pero el height me está dando problemas y no lo consigo. A ver si alguien me echa una ayudita. Os paso el código HTML y el CSS

Código HTML
Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<link href="intranet2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenido">
<div id="cabecera"><span class="subcabecera1"><img src="escudo.jpg"></span><span class="subcabecera2"><img src="sombras.gif"></span></div>
<h1>
<a href="intranet.htm" title="Inicio">Inicio</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="mapa.htm" title="Mapa Web">Mapa Web</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="mailto:[email protected]" title="Sugerencias">Sugerencias</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="ayuda.htm" title="Ayuda">Ayuda</a>
</h1>
<div id="centroizq"></div>
<div id="centrodch">
<h3>Enlaces</h3>
</div>
<div id="centrocnt"></div>
<h2>IMSERSO © 2007</h2>
</div>
</body>
</html>
Código CSS
Cita:
html {
padding:0px;
margin:0px;
/*height: 100%;*/
}
body {
font-size: 10px;
font-family: Verdana;
color: #003366;
padding: 0px;
margin: 0px;
/*height: 100%;*/
}
/*h1 {
margin: 0px;
}*/
#contenido {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#cabecera {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 67px;
background: url(fondo.jpg);
background-repeat: repeat;
z-index: 1;
}
.subcabecera1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
.subcabecera2 {
position: absolute;
top: 0px;
left: 350px;
z-index: 2;
}
h1 {
position: absolute;
top: 67px;
left: 0px;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #006699;
background-color: #ECE9D8;
margin: 0px;
padding-top: 3px;
padding-left: 10px;
padding-bottom: 4px;
border-top: 1px solid #003366;
border-bottom: 1px solid #003366;
font-weight: normal;
}
h1 a:link, a:visited, a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
text-decoration: none;
}
h1 a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003366;
text-decoration: none;
}
#centroizq {
position: absolute;
top: 93px;
left: 0px;
width: 200px;
margin: 0px;
padding: 0px;
/*height: 420px;*/
background-color: #006699;
border-right: 1px solid #003366;
}
#centrocnt {
margin: 0px 190px 0px 190px;
padding: 0px;
background-color: #ffffff;
height: 420px;
}
#centrodch {
position: absolute;
top: 93px;
right: 0px;
width: 200px;
margin: 0px;
padding: 0px;
/*height: 420;*/
background-color: #006699;
border-left: 1px solid #003366;
}
h2 {
position: absolute;
top: 495px;
left: 0px;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
background-color: #ECE9D8;
margin: 0px;
padding-top: 1px;
padding-left: 10px;
padding-bottom: 2px;
border-top: 1px solid #003366;
text-align: center;
font-weight: normal;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
background-color: #ECE9D8;
margin: 0px;
padding-top: 1px;
padding-left: 10px;
padding-bottom: 2px;
border-bottom: 1px solid #003366;
text-align: center;
font-weight: normal;
}
Al hacer lo del width he visto que la solución era dejar el div central sin definir la propiedad width y como los dos laterales tienen un ancho definido, el div central se ajusta a lo que necesite. Además el valor de position en los dos divs laterales es absolute, mientras que en el central al no venir definido creo que se entiende que es como relative.
Pero esto mismo no lo puedo reproducir en cuanto a la altura porque en principio solo tengo dos capas, y no tres como en el width, y además la capa que debería ir con position:relative la tengo que dejar en absolute para que me funcione lo del width.

Bueno, no sé si me habré expresado bien y me entendereis, pero espero que alguien lo haga y me dé una solución.

Gracias.
  #2 (permalink)  
Antiguo 30/03/2007, 03:35
 
Fecha de Ingreso: diciembre-2003
Mensajes: 83
Antigüedad: 14 años
Puntos: 0
Re: Problema con el height

A ver si alguien se anima y me da una respuesta
  #3 (permalink)  
Antiguo 30/03/2007, 14:19
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Re: Problema con el height

A mi humilde entender, el height de un elemento siempre es relativo a su contenido o definido, nunca relativo a la resolución. Puedes usar un min-heigh y max-height, aunque esto no te lo respeta IE.

No sé para qué lo necesites, pero lo que podrías hacer es detectar con javascript la resolución de tu visitante y aplicar una hoja de estilos para cada resolución... pero es una posible solución, pero es muy rebuscado y no vale la pena...

Saludos
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 20:38.