Foros del Web » Creando para Internet » CSS »

[AYUDA]Problema Height 100% - problema extraño no encuentro solucion

 Estas en el tema de [AYUDA]Problema Height 100% - problema extraño no encuentro solucion en el foro de CSS en Foros del Web. Hola a todos, bueno tengo un CSS, en el cual hago lo siguiente. configuro primero CSS asi Código: body { margin : 0; height:100%; font-family ...
  #1 (permalink)  
Antiguo 03/03/2009, 06:31
 
Fecha de Ingreso: octubre-2008
Mensajes: 112
Antigüedad: 15 años, 6 meses
Puntos: 1
[AYUDA]Problema Height 100% - problema extraño no encuentro solucion
Hola a todos, bueno tengo un CSS, en el cual hago lo siguiente.

configuro primero CSS asi

Código: 
body {
margin : 0; height:100%;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 10px;
color:#666666;
background-color: #333333;
}

#sombracont{
width:770px; height:100%; margin:auto;
background-image:url(images/fondo.png); background-repeat:repeat-y;
}

#contenedor{
width:750px; margin:auto;
background-color:#FFFFFF;
border-left:#666666 solid 1px; border-right:#666666 solid 1px;
position: relative;
min-height: 100%;
height: auto;
height: 100%;
}

#cabecera{
width:100%; height:161px;
background-color:#000000;
}

#sombracab{
width:100%; height:8px;
background-image:url(images/sombracab.png); background-repeat:repeat-x;
}

#contenido{
width:100%; height:100%;
}

#izquierda{
float:left; margin-left:5px;
width:175px; height:auto;
font-size:11px; border-right:#666666 solid 1px;
}

#derecha{
float:right;
width:150px; height:auto;
}

#centro{
margin:185px; margin-top:0;
width:380px; height:auto;
}

#pie{
width:750px; height:auto; margin:auto;
text-align:center;
background-color:#FFFFFF;
border-right:#666666 solid 1px;
position: absolute;
bottom: 0;
}

Bien, ahora el problema es el siguiente en html pongo el #contenedor, dentro del mismo la #cabecera hasta ahi todo perfecto, la pagina ocupa el 100%, y no me es necesario utilizar el scroll que es la idea principal.

bueno pero resulta lo siguiente, cuando debajo de la cabecera y la sombra cabecera pongo el div "contenido" que tambien tiene height 100% porque la idea es que ese llegue hasta el final de la página, pero que no sea necesario utilizar el scroll, resulta que se me agregan la cantidad de pixels que utilizan los divis cabecera y sombra cabecera al final de la pagina, y se me activa el scroll...

como puedo solucionar esto??? ya que la idea es que contenedor llegue hasta el final de la pagina, y que los divs que estan dentro de el tengan su propio scroll, que el scroll principal del navegador no sea necesario activarlo.

Saludos
  #2 (permalink)  
Antiguo 03/03/2009, 08:13
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 6 meses
Puntos: 40
Respuesta: [AYUDA]Problema Height 100% - problema extraño no encuentro solucion
pruebalo de esta manera, modifiqué un poco tu código, copialo y pegalo en un archivo nuevo para que veas bien el efecto de que si es lo que quieres:

Código css: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. *{margin:0; padding:0;}
  8. html,body {
  9. height:100&#37;;/*alto cien por ciento*/
  10. font-family : verdana, arial, helvetica, sans-serif;
  11. font-size : 10px;
  12. color:#666666;
  13. background-color: #333333;
  14. }
  15.  
  16. #sombracont{
  17. width:770px; height:100%; margin:auto;
  18. background-image:url(images/fondo.png); background-repeat:repeat-y;
  19. }
  20.  
  21. #contenedor{/*editado*/
  22. width:750px; margin:0 auto;
  23. background-color:#FFFFFF;
  24. border-left:#666666 solid 1px; border-right:#666666 solid 1px;
  25. min-height: 100%;
  26. height: auto!important;
  27. height: 100%;
  28. }
  29.  
  30. #cabecera{
  31. width:100%; height:161px;
  32. background-color:#000000;
  33. }
  34.  
  35. #sombracab{
  36. width:100%; height:8px;
  37. background-image:url(images/sombracab.png); background-repeat:repeat-x;
  38. }
  39.  
  40. #contenido{
  41. width:100%; min-height:100%; height:auto!important;height:100%; position:relative;background-color:#FFFFFF;
  42. }
  43.  
  44. #izquierda{
  45. float:left; margin-left:5px;
  46. width:175px; height:auto;
  47. font-size:11px; border-right:#666666 solid 1px;
  48. }
  49.  
  50. #derecha{
  51. float:right;
  52. width:150px; height:auto;
  53. }
  54.  
  55. #centro{
  56. margin:185px; margin-top:0;
  57. width:380px; height:auto;
  58. }
  59.  
  60. #pie{
  61. width:750px; height:auto; margin:auto;
  62. text-align:center;
  63. background-color:#FFFFFF;
  64. border-right:#666666 solid 1px;
  65. position: absolute;
  66. bottom: 0;
  67. }
  68. </style>
  69. </head>
  70.  
  71. <body>
  72. <div id="contenedor">
  73.     <div id="cabecera"></div>
  74.     <div id="sombracab"></div>
  75.     <div id="contenedor">
  76.         <div id="izquierda"></div>
  77.         <div id="centro">
  78.             texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />
  79.             texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />
  80.             texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />
  81.             texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />
  82.             texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />
  83.             texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />
  84.         </div>
  85.         <div id="derecha"></div>
  86.         <div style="clear:both"></div>
  87.         <div id="pie">pie</div>
  88.     </div>
  89. </div>
  90. </body>
  91. </html>

también prueba quitando todo el texto de contenido y verás que igual se queda abajo,avisas como te va
__________________
WFC
codigo82
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:08.