Foros del Web » Creando para Internet » CSS »

problema div con porcentaje

Estas en el tema de problema div con porcentaje en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/02/2011, 13:08
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
problema div con porcentaje

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.
  #2 (permalink)  
Antiguo 20/02/2011, 14:31
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 7 años
Puntos: 2
Respuesta: problema div con porcentaje

prueba sin usar porcentajes
  #3 (permalink)  
Antiguo 20/02/2011, 17:09
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: problema div con porcentaje

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.
  #4 (permalink)  
Antiguo 20/02/2011, 17:48
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: problema div con porcentaje

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 original
  1. body, html {
  2.     height: 100%;
  3.     margin:0;
  4. }
  5. #contenedor100 {
  6.     min-height:100%;
  7.     background:green;
  8. }
  9. #banner {
  10.     width: 100%;
  11.     height: 200px;
  12.     background: blue;
  13. }
  14.  
  15. #barra {
  16.     width: 150px;
  17.     height: auto;
  18.     background: red;
  19.     top: 200px;/* el alto de banner */
  20.     bottom: 0;/* Hasta el borde inferior */
  21.     position: absolute;
  22. }
  23. #contenido{
  24. margin-left:150px;/* el ancho de barra */
  25. background:grey;
  26. }

Código HTML:
Ver original
  1. <div id="contenedor100">
  2.   <div id="banner">...</div>
  3.   <div id="barra">... </div>
  4.   <div id="contenido">...</div>
  5. </div>
  6. </body>

Etiquetas: porcentaje
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:01.