<!DOCTYPE html>
<html>
<head>
<style>
/* Definimos el ancho y alto total */
.wrapper { height:300px;
border:1px solid;
position:relative;
width:200px;
}
/* Definimos la cabecera con posicion absoluta en la parte superior */
header { clear:both;
background-color:lime;
height:50px;
top:0;
position:absolute;
width:100%;
}
/* Definimos el articulo con altura total para utilizar toda la altura definida
en el .wrapper */
article { clear:both;
position:absolute;
height:100%;
top:0;
width:100%;
box-sizing:border-box; /* indicamos que los padding no ganen espacio */
padding-top:50px; /* nos separamos la altura del header */
padding-bottom:30px; /* nos separamos la altura del footer */
background-color:cyan;
}
/* Definimos el div que contendra el contenido del articulo. Creamos un borde
rojo para que se vea que el div ocupa toda la altura posible */
article>div { box-sizing:border-box;
border:3px solid Red;
height:100%
}
/* Definimos el footer con posicion absolote en la parte de abajo*/
footer { background-color:silver;
position:absolute;
width:100%;
bottom:0px;
height:30px;
}
</style>
</head>
<body>
</body>
<div class="wrapper">
<article>
<div>article</div>
</article>
<header>header</header>
<footer>footer</footer>
</div>
</html>
Crear cuenta
Comentarios sobre la versión: Versión 1.0 (0)
No hay comentarios