problema div con porcentaje

Ciel · #1 (**permalink**) 20/02/2011, 13:08

Hola...

Mi problema es el siguiente, quiero crear un div con el 100% de height... dentro del body. Busque y me encontre con la solucion de darle height: 100% al body y html... pero sigue habiendo un problema... antes de ese div, al que le quiero dar 100% de height... hay un banner arriba... un banner con un height expresado en pixeles... para mejor explicacion, les dejo un codigo:

HTML:

Código:

<div id="banner"> </div>

<div id="barra"> </div>

CSS:

Código:

body, html {
    height: 100%;
}

#banner {
    width: 100%;
    height: 200px;
    background: blue;
}

#barra {
    width: 150px;
    height: 100%;
    background: red;
}

El tema es que me agrega las barras verticales, porque al ponerle 100% se ve que no toma en cuenta el banner...

Como podria solucionar esto? Gracias de antemano...

Se que con tablas no es ningun problema hacer esto, pero bueno... no es lo que busco exactamente.

3rps · #2 (**permalink**) 20/02/2011, 14:31

prueba sin usar porcentajes

Ciel · #3 (**permalink**) 20/02/2011, 17:09

Y pero entonces no podre hacer justamente lo que busco =p. La idea es que la barra ocupe todo el largo del navegador... sin importar la resolucion.

sanxuan · #4 (**permalink**) 20/02/2011, 17:48

Debes incluir el banner dentro del div al 100%. Lo habitual es crear un contenedor que encierre al resto de componentes de la página y darle a este la altura 100%.
Yo suelo usar la propiedad min-height:100% para ese contenedor. Una posibilidad puede ser esta:

Código CSS:

Ver originalbody, html {
    height: 100%;
    margin:0;
}
#contenedor100 {
    min-height:100%;
    background:green;
}
#banner {
    width: 100%;
    height: 200px;
    background: blue;
}
 
#barra {
    width: 150px;
    height: auto;
    background: red;
    top: 200px;/* el alto de banner */
    bottom: 0;/* Hasta el borde inferior */
    position: absolute;
}
#contenido{
margin-left:150px;/* el ancho de barra */
background:grey;
}

Código HTML:

Ver original<body>
<div id="contenedor100">
  <div id="banner">...</div>
  <div id="barra">... </div>
  <div id="contenido">...</div>
</div>
</body>