i quiero que el header tenga la altura por defecto (con un padding que le pongo) y el footer un 10%, como hago para que el contenido me ocupe el resto para que todo en conjunto sea el 100% de la página? Si le pongo al contenido un 80% el header es mas de un 10% y ya hay que hacer scroll y es lo que estoy intentando que no pase.
1 respuesta
Te comparto un ejemplo que cumple con lo siguiente:
- El header puede tener un alto dinámico.
- El footer tendrá un alto del 10% relativo al alto de la ventana.
- El content tendrá un alto variable pero siempre tratara de ocupar todo el espacio disponible del resto entre el alto dinámico del header y el footer.
Ejemplo online: https://jsfiddle.net/chenay01/25hd90Lc/13
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
padding: 0;
}
header {
border: 1px solid;
padding: 20px;
}
section {
border: 1px solid;
flex: 1 1 auto;
padding: 20px;
}
footer {
border: 1px solid;
height: 10vh;
padding: 20px;
}
<header>header</header>
<section>content</section>
<footer>footer</footer>
Para este ejemplo utilice el diseño flexible "flexbox" y las medidas relativas de acuerdo al viewport (vh/vw) de CSS3.
-
Tu respuesta es muy buena para lo que solicita David, pero para que tu diseño quede como el de la imagen que muestra él deberías agregar la propiedad de
width:50%;
ymargin: auto;
para centrar la caja en el section para el contenido. el 2 mar. 2020 a las 17:26