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> | <a href="mapa.htm" title="Mapa Web">Mapa Web</a> | <a href="mailto:
[email protected]" title="Sugerencias">Sugerencias</a> | <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.