Main menu

Elementos al 100% del ancho y alto de pantalla

Veamos como poner dos elementos, uno encima de otro y que ocupen cada uno el 100% de la pantalla.
Supongamos que tenemos esta estructura:

<body>
    <div id="contenedor">
        <div id="area1">
             <h1>Esta es la primera sección</h1>
        </div>
        <div id="area2">
             <h2>Esta es la segunda sección</h2>

        </div>
    </div>
</body>

Le diremos al html y al body que ocupe el 100% del alto. También quitaremos los márgenes y padding que pudiéramos tener.

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

Preparamos el contenedor en posición absoluta (el body tiene que estar en posición relativa) y le damos un top y un bottom de 0. La posición, el top y el bottom son los 3 elementos que hacen magia para tener el alto del 100%. Además añadimos el ancho del 100%.

#contenedor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

Ahora vamos a la áreas. Las ponemos en posición absoluta, con un alto y ancho del 100% ¿es lo que queremos, no? ;). El min-height se pone por si nos da problemas algún navegador.

#area1, #area2 {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

Y ahora lo que haremos es poner un área encima de otra. Para ello ponemos un área en el top, arriba del todo. ¿Cómo ponemos la segunda área a continuación? Si el area1 ocupa el 100% del alto, el area2 debemos ponerlo en ese punto, al top 100%, así una está a continuación de la otra.
Le ponemos unos bordes para que se vea claramente como queda.

#area1 {
    top: 0;
    border: 1px solid red;
}
#area2 {
    top: 100%;
    border: 1px solid blue;
}

Y eso es todo. Os dejo el enlace a la demo y al código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


FacebookTwitter