Definir una altura para elementos DIV sin problemas
Esta nota es una adaptación a español de un post de Andy Peatling titulado 100% Height Issues en su site CSS Dev.
Básicamente se trata de habilitar algún modo correcto para que un div al que le dotamos de un valor de altura, height, ocupe el 100% de esa altura de la que le hemos dotado, cuando ésta es del 100%. Todo ello, de forma independiente al contenido que albergue ese div.
Andy Peatling dice que para que los valores porcentuales funcionen adecuadamente, es necesario que los elementos padre tengan definido el valor height. De esa guisa, el elemento padre de div será body, y de éste último, html.
Lo que quedará es especificar un valor de height para esos dos elementos, tal que:
html, body { height: 100%; }.
Y voilà. Los div con altura 100%, al tener sus padres definido también un valor de height, se expandirán por completo a lo largo de la pantalla del dispositivo.
Actualización: Adjunto en el cuerpo del post el código que he probado y que funciona en los siguientes navegadores: Firefox (w32), IExplorer 6, 5.5, 5.01 (w32), Opera 7.53 (w32)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Probando la altura fija</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#sidebar {
background: #99CC99;
height: 100%;
width: 150px;
}
#contenido-sidebar {
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="sidebar">
<div id="contenido-sidebar">
<p><strong>Sidebar</strong></p>
<ul>
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
<li>Opción 4</li>
<li>Opción 5</li>
</ul>
</div>
</div>
</body>
</html>
En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario y adaptadas al contexto de uso. Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.
sin palabras…habiendo dado tantas vueltas al tema y esta solucion se entrevé com la más simple y solida!
tengo que hacer alguna prueba pero tiene muchos puntos.
grácias!!!
mmm, falsa alarma 🙁 tendria que funcionar con el min-height ya que al marcar el height como 100% si sobrepasas ese valor la caja no se expande logicamente.
gracias, he sido fan de tu sitio desde hace rato. Hoy te añadi tu URL a mi del.icio.us.
:'( gracias!!!!! llevaba meses buscando respuesta e esto!!!
I LOVE YOU!!! jaja
Gracias che, sos mi heroe
Hola a todos.
Siempre he tenido este problema, sigo teniéndolo y no consigo dar con solución alguna a este problema.
A mi no me funciona en lo absoluto, ni con height: 100%, ni con min-height: 100% y este es mi código:
html{
height: 100%}
body {
margin : 0px;
text-align:center;
font: 1em Trebuchet MS, Helvetica, Arial, sans-serif;
height: 100%;
}
#container {
margin: 0 auto;
text-align: left;
padding: .2em;
width: 720px;
border: 5px solid #B7C5DF;
}
#banner {
margin: 0;
padding: 0.5em 1.3em;
position: auto;
height: 100px;
border:0px none;
text-align: left;
background: #3399cc;
}
#left {
float: left;
position: auto;
height: 100%;
width:200px;
top:115px;
text-align: left;
}
#main {
position: auto;
width: 720px;
top: 115px;
text-align: left;
height: 100%;
}
#pie {
color: #c1c1c1;
font-size: 0.75em;
margin: 0;
padding: 0.3em;
text-align: center;
background: #999;
}
En que estoy fallando??
Gracias
pos va a ser que modifico el estilo del wordpress y nada … html, body y #sidebar tienen height:100%
Yo sigo sin conseguirlo, aún aplicando estas instrucciones…
Mmmm visita esta página..la explicación es muy buena..
http://www.simplelogica.net/caoticoneutral/index.php?p=33
u_u
Lo siento, pero no funciona si se pone borde, ya que aparece una barra de desplazamiento en el ie (no en el firefox):
#sidebar {
background: #99CC99;
height: 100%;
width: 150px;
border: solid 1px black;
}
Me ha venido perfecto, muchas gracias.
gracias. muy buena información.
dios…. llevaba horas con esto, muchas gracias, me has salvado.
El container deberías hacerlo al 100% tambien. Para que funcione todas las capas contenedoras deben tener el height al 100%. Si una de ellas lo tiene establecido en px, su 100% será relativo a esta última.
Overflow:auto podría hacer que desapareciesen las barras de desplazamiento del navegador.
Un saludo.
gracias