Hola a todos. Estoy tratando de hacer algo que creo que tiene que ser muy simple, pero no me sale.
Mi intención es generar un div que contenga a su vez otros tres dentro. Uno al top con 100px de alto, el central para el contenido, y otro al bottom, también con 100px de alto, y todo esto ocupando únicamente el 100% de alto de la página (sin que salga el scroll).
Lo he intentado de mil modos pero estoy totalmente atascada y no ser por dónde salir, así que a ver si alguien me puede ayudar.
En el html tengo esto, aunque ya os digo que probé de mil maneras:
Código:
<body>
<div id="contenedor">
<div id="contenido">
<div id="arriba"></div>
<div id="abajo"></div>
</div>
</div>
</body>
Y en el css tengo esto:
Código:
html, body{height:100%; margin:0px;}
#contenedor { height: 100%;margin:0px;}
#contenido {height:100%; background:#0000FF;}
#arriba {height:100px; background:#333333;}
#abajo {height:100px; background:#FF0000;}
Tal y como está se ven el div arriba y el div abajo dentro del div contenido, pero los dos salen juntos arriba del todo.
Gracias de antemano!!!!!!!