[SOLUCIONADO] div no se ajusta a la altura del navegador

lvan · #1 (**permalink**) 20/12/2013, 10:06

Buenas tardes amigos. Soy nuevo en la parte de desarrollo web y tengo un problema con una pg web que estoy desarrollando en html5 y css3 , bueno la cosa es que quiero que el div cuyo id es content ocupe todo el espacio vertical hasta el footer, he intentado aplicando height:100% pero no me funciona pero cuando especifico un altura fija como height:500px por alguna razon me funciona.
Aqui tengo el codigo que estoy utilizando y gracias por su ayuda

CSS:

Código CSS:

Ver originalheader{
    border:1px solid #0F0;
    height:40px;
    width:100%;
    position:fixed;
    top:0px;
    background:#000;
}
#content{
    border:1px double #66FFFF;
    width:900px;
    z-index:2;
    margin:40px auto ;
    background:#FFF;
    height:100%;
}
nav{
    border:1px solid #F00;
    background:#666;
}
aside{
    float:left;
    width:250px;
    border:1px dashed #000;
    background:#CF9;
}
article{
    margin-left:250px;
    border:1px dotted #3F0; 
}
footer{
    border:1px groove #0FF;
    position:fixed;
    bottom:0px;
    width:100%;
    background:#000;
}

HTML:

Código HTML:

Ver original<html>
<header>
        cabezera
    </header>
    <div id="content">
        <nav>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>trs</li>
                <li>cuatro</li>
                <li>cinco</li>
            </ul>
        </nav>
        <section>
            <aside>menu lateral</aside>
            <article>
                contenido
            </article>
        </section>
    </div>
    <footer>pie de pg</footer>
</html>

\

pzin · #2 (**permalink**) 20/12/2013, 10:21

Bienvenido al foro.

Eso es porque si especificas una altura porcentual, es relativo a su contenedor. Por defecto la altura de todos los elementos es automática (height: auto) lo que quieres decir que la altura dependerá de su propio contenido.

Entonces si a un elemento le indicas que ocupe el 100% de su contenedor que tiene una altura automática, es igual a no hacer nada, ya que esa altura a la que haces referencia (indirectamente) es automática.

Lo que puedes hacer es indicar a los elementos antecesores que tengan una altura:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

lvan · #3 (**permalink**) 20/12/2013, 10:27

tienes toda la razon, lo probé y me funciono mil gracias, realmente no se como se como se me escapo eso, nuevamente mil gracias y saludos..