Hola,
Soy un principiante en esto de las CSS . Estoy haciendo una pagina basica para aprender que contiene una cabecera, un menu lateral izquierdo, una capa que tiene el contenido (a la derecha del menu) y un pie de pagina.
El problema esta en la CSS, (al menos eso creo). Quiero hacer que tanto el menu lateral izquierdo como su contenido (el cuadro azul), caigan hasta abajo de la pantalla del navegador, y que justo abajo de él se situe el pie de pagina. Usando magnitudes relativas (%).
En definitiva que el usuario pueda ver que la pagina ocupa todo el navegador.
La imagen de lo que he hecho lo podeis ver aqui:
http://img215.imageshack.us/my.php?i...incipalir3.gif
El codigo del html es el siguiente:
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Untitled Document</title>
<link rel="StyleSheet" href="estilos.css" type="text/css"/>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h2>Pagina de prueba</h2>
</div>
<div id="menu">
<h2>Link1</h2>
<h2>Link2</h2>
<h2>Link3</h2>
<h2>Link4</h2>
<h2>Link5</h2>
</div>
<div id="contenido">
<p>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.
</p>
</div>
<div id="pie">
CopyRight
</div>
</div>
</body>
</html>
El codigo CSS es el siguiente:
Código:
#contenedor {
width:100%;
height:100%;
}
#cabecera {
background-color: silver;
border: solid;
text-align: center;
height:20%;
}
#menu {
float: left;
width: 15%;
background-color: green;
height:60%;
}
#contenido {
float: right;
width: 85%;
background-color: #00ccff;
height:60%;
}
#pie {
clear: both;
background-color: orange;
border: solid;
text-align: center;
height:20%;
}
Gracias por anticipado.
Un saludo.