Foros del Web » Creando para Internet » CSS »

adaptar body al contenedor

Estas en el tema de adaptar body al contenedor en el foro de CSS en Foros del Web. Buenas, Quiero que mi div ocupe toda la web y para eso le aplico la siguietne regla css. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original html ...
  #1 (permalink)  
Antiguo 20/05/2011, 08:11
 
Fecha de Ingreso: noviembre-2007
Mensajes: 471
Antigüedad: 10 años, 1 mes
Puntos: 2
adaptar body al contenedor

Buenas,

Quiero que mi div ocupe toda la web y para eso le aplico la siguietne regla css.

Código CSS:
Ver original
  1. html,body{
  2.  
  3. margin:0px;
  4.  
  5. height:100%;
  6.  
  7. }
  8.  
  9. body{
  10. background:blue;
  11. }
  12.  
  13. #div{
  14.    
  15.     margin:auto;
  16.     padding:0;
  17.     width:460px;
  18.     height:100%
  19. }

el problema esta cuando el div es demasiado alto y se genera el scroll entonces el div continua pero el body no. ya que el body se adapta a la etiqueta html.

Como se logra esto??.

Saludos
  #2 (permalink)  
Antiguo 20/05/2011, 08:35
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: adaptar body al contenedor

como se logra qué??

si al bloque le asignas el 200% el body tomará el 200%. o lo que es lo mismo el fondo del body (azul) ocupará todo el alto del bloque
  #3 (permalink)  
Antiguo 20/05/2011, 09:13
 
Fecha de Ingreso: noviembre-2007
Mensajes: 471
Antigüedad: 10 años, 1 mes
Puntos: 2
Respuesta: adaptar body al contenedor

Cita:
Iniciado por IsaBelM Ver Mensaje
como se logra qué??

si al bloque le asignas el 200% el body tomará el 200%. o lo que es lo mismo el fondo del body (azul) ocupará todo el alto del bloque
si eso es verdad que el body siempre se ajusta al div. pero que pasa si tenes dos div.

Código CSS:
Ver original
  1. html,body{
  2.  
  3. margin:0px;
  4.  
  5. height:100%;
  6.  
  7.  
  8.   padding: 0;
  9. }
  10.  
  11. body{
  12. background:blue;
  13. margin:auto;
  14.     padding:0;
  15.     width:100%;
  16.     color:#8a8a8a;
  17.     background:blue ;
  18. }
  19.  
  20. #div{
  21.    
  22.     margin:auto;
  23.     padding:0;
  24.     width:960px;
  25.     background:red url(../img/main_bg.gif) repeat left top;
  26.     height:100%
  27. }
  28.  
  29. #div2 {width:900px; height:800px; margin-left:30px; background:yellow ;}

el div de color rojo se tendria que ajustar al div2 pero no es asi el div2 sobre sale del div.

les dejo una imagen
http://img36.imageshack.us/i/dibujolli.jpg/
  #4 (permalink)  
Antiguo 20/05/2011, 10:44
Avatar de edwines  
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 6 años, 7 meses
Puntos: 3
Respuesta: adaptar body al contenedor

Tienes razón, debería adaptarse... ¿en qué navegador estas trabajando?
  #5 (permalink)  
Antiguo 20/05/2011, 11:50
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: adaptar body al contenedor

como es el codigo html? podrias dejarlo
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #6 (permalink)  
Antiguo 20/05/2011, 12:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: adaptar body al contenedor

si tu especificas una altura este div la tomara y le importara poco si hay mas contenido o no... sean px o sea porcentajes este se comporta igual, hasta aqui vamos bien?

el 100% de altura es con respecto a su contenedor o en su caso el navegador ya que es tu div principal donde meterás todo el sitio, estas de acuerdo?

tu le has indicado que tome el 100% y eso hace, si el contenido excede la altura disponible este div no tiene porque crecer ya que tu le has dicho tome solo el 100% de altura y el te obedece.

si necesitas que tenga el 100% de altura y si el contenido es aun mas extenso siga creciendo utiliza min-height:100%;height:auto; con esto le indicas la altura mínima debe ser 100% pero si necesita crecer tiene toda la libertad de hacerlo.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 20/05/2011, 12:56
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: adaptar body al contenedor

el bloque #div se adapta a la ventana, para que se adapte al contenido has de cambiar el valor de la propiedad heigh a auto

perdona Ag666, tuve que atender a algo y no me di cuanta que ya habías respondido
  #8 (permalink)  
Antiguo 20/05/2011, 13:09
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 8 años, 5 meses
Puntos: 641
Respuesta: adaptar body al contenedor

Código CSS:
Ver original
  1. #div{
  2.     margin:auto;
  3.     padding:0;
  4.     width:960px;
  5.     background:red;
  6.     height:100&#37;;
  7.     overflow:hidden;
  8. }
  #9 (permalink)  
Antiguo 20/05/2011, 13:14
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: adaptar body al contenedor

Cita:
Iniciado por IsaBelM Ver Mensaje
perdona Ag666, tuve que atender a algo y no me di cuanta que ya habías respondido
Hola IsaBelM un gusto encontrarte por estos rumbos ñ.ñ

Cita:
Iniciado por memoadian Ver Mensaje
Código CSS:
Ver original
  1. #div{
  2.     margin:auto;
  3.     padding:0;
  4.     width:960px;
  5.     background:red;
  6.     height:100%;
  7.     overflow:hidden;
  8. }
Compañero @memoadian ha visto usted lo que pasa si agrega la propiedad overflow hidden ???

el div contenedor sigue ocupando el 100% de altura y el contenido excedente simplemente no lo mostrara.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 20/05/2011, 13:30
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 8 años, 5 meses
Puntos: 641
Respuesta: adaptar body al contenedor

yo veo esto en firefox

http://img857.imageshack.us/img857/4255/dibujoprs.jpg

que es lo que quiere entonces?
  #11 (permalink)  
Antiguo 20/05/2011, 13:34
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: adaptar body al contenedor

si pero tienes la ventana maximizada, agrega mas contenido para que supere el alto o cambia el tamaño de tu navegador y veras a lo que me refiero
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #12 (permalink)  
Antiguo 20/05/2011, 13:36
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 8 años, 5 meses
Puntos: 641
Respuesta: adaptar body al contenedor

ah ya lo del scroll. no pensé que fuera tanto problema.

y no lei tu mensaje del min-height, no se por que me lo salté.

Etiquetas: body, contenedor, adaptador
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 17:05.