Altura flexible

Cómo conseguir que una página se extienda verticalmente al cien por cien de la ventana del navegador.

Modigliani

archivado en: HTML/CSS / 2 noviembre, 2013

Las páginas HTML no se llevan bien con las necesidades de diseño en vertical, como bien sabe todo aquel que haya tratado en vano de aplicar la propiedad vertical-align: middle, una propuesta alquímica inmanejable. En esta línea de oscurantismo, para que los contenedores de una página abarquen de forma elástica el cien por cien de la altura del navegador, como en este ejemplo, hay que hacer un apaño y es definir un height 100% para el html y el body. Algo así.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Altura flexible</title>

<style type="text/css">

html, body {

height: 100%;

margin:0;

padding:0;

}

#contenedorPrincipal {

height: 100%;

padding:0;

}

#cabecera {

height:10%;

width:100%;

margin:0;

background:#900;

}

#desarrollo {

width:100%;

height:80%;

margin:0;

background:#090;

overflow-y: auto;

}
#pie {

height:10%;

width:100%;

margin:0;

background:#009;

}

</style>

</head>

<body id="js-desarrollo">

<div id="contenedorPrincipal">

<div id="cabecera"></div>

<div id="desarrollo"></div>

<div id="pie"></div>

</div>

</body>

</html>

ver este ejemplo en git

|| Tags: ,

valoración de los lectores sobre Altura flexible

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.