Foros del Web » Creando para Internet » CSS »

Div height 100% que causa scroll indeseado

Estas en el tema de Div height 100% que causa scroll indeseado en el foro de CSS en Foros del Web. El elemento "margeninferior" cumple la función de ocultar el espacio sobrante de la ventana ocupado por la imagen relleno.jpg que se repite verticalmente a lo ...
  #1 (permalink)  
Antiguo 09/02/2010, 13:19
Avatar de Dude--  
Fecha de Ingreso: junio-2004
Ubicación: Sevilla - España
Mensajes: 197
Antigüedad: 13 años, 5 meses
Puntos: 4
Div height 100% que causa scroll indeseado

El elemento "margeninferior" cumple la función de ocultar el espacio sobrante de la ventana ocupado por la imagen relleno.jpg que se repite verticalmente a lo largo de toda la página (background del BODY) y de hecho lo hace, pero aunque la página no ocupa más de lo que muestra el navegador en pantalla como para que aparezca el scroll del mismo, al estar en 100% el "margeninferior" añade espacio por debajo del resto del contenido, haciendo que aparezca el scroll del navegador... lo cual no tiene mucho sentido, ya que en teoría lo que debería hacer es "rellenar" el espacio sobrante desde que termina el elemento "pie" hasta el final de la ventana...

Código HTML:
Ver original
  1. <!-- [R] Quirks mode de IE -->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  4.     <head>
  5.        
  6.         <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  7.            
  8.         <meta http-equiv="content-language" content="es" /> <!-- Compatibilidad retroactiva con navegadores antiguos -->
  9.        
  10.         <link href="basic.css" rel="stylesheet" type="text/css" media="screen" />
  11.    
  12.         <title></title>
  13.     </head>
  14.  
  15. <div id="principal">
  16.      <div id="contenido">Prueba<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />10</div>
  17.      <div id="pie"></div>
  18.      <div id="margeninferior"></div>       
  19. </div>
  20.  
  21. </body>
  22. </html>

Código CSS:
Ver original
  1. [
  2. BODY
  3. {
  4.     margin: 0px;
  5.     padding: 0px;
  6.     border: 0px;
  7.    
  8.     font-family:Arial, Helvetica, sans-serif;  
  9.     line-height:18px;
  10.     font-size:12px;
  11.     color: #06185c;
  12.  
  13.     background: #1e0000 url(img/relleno.jpg) repeat-y top center;
  14.    
  15.     text-align:center; /*Para centrar contenido con IE7, vaya mierda de navegador ¬_¬*/
  16. }
  17.  
  18. #principal
  19. {
  20.     position: static;
  21.     margin: 0px;
  22.     padding: 250px 0px 0px 0px;
  23.     border: 0px;
  24.     background: url(img/fondo.jpg) no-repeat top center;
  25.     height: 557px;
  26. }
  27.  
  28. #contenido
  29. {
  30.     text-align:left;
  31.     position: static;
  32.     background:#FF00FF;
  33.     width: 850px;
  34.     margin: auto;
  35.     padding: 0px;
  36.     border: 0px;
  37. }
  38.  
  39. #pie
  40. {
  41.     position: static;
  42.     margin: auto;
  43.     padding: 0px;
  44.     border: 0px;
  45.     background: #1e0000 url(img/pie.jpg) no-repeat top center;
  46.     height: 34px;
  47.     width: 968px;
  48. }
  49.  
  50. #margeninferior
  51. {
  52.     position: static;
  53.     margin: auto;
  54.     padding: 0px;
  55.     border: 0px;
  56.     background: #1e0000;
  57.     height: 100%;
  58.     width: 970px;
  59. }
__________________
"El camino empieza renunciando el control y volviéndose flexibles, como una brizna de paja en un huracán."

"Desconozco tanto... es excitante comenzar a nadar en este mar de dudas..."

Última edición por Dude--; 09/02/2010 a las 13:31
  #2 (permalink)  
Antiguo 09/02/2010, 13:36
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Div height 100% que causa scroll indeseado

En www.araudi.net hay algunos ejemplos de pie siempre abajo, analiza el codigo fuente y ahi encontraras la solucion.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 09/02/2010, 19:05
Avatar de Dude--  
Fecha de Ingreso: junio-2004
Ubicación: Sevilla - España
Mensajes: 197
Antigüedad: 13 años, 5 meses
Puntos: 4
Respuesta: Div height 100% que causa scroll indeseado

En primer lugar gracias por la página, veo muchas cosas que me serán útiles.

En segundo decirte que no encuentro ahí la forma de resolver mi problema, ya que es mi pie ("margeninferior") el que debe ocupar el espacio sobrante correspondiente. Para ver si consigo explicarme mejor: Centrándonos en el ejemplo que mencionas, la zona que pone "Pie" con fondo color verde agua debería empezar tras el texto y llegar hasta la parte de abajo de la ventana, sin provocar un incremento de la misma innecesario que por tanto causara la aparición del citado barra de scroll del navegador, es decir (descartando al div "corte") desde el final de "contenido" hasta el final de la página. Vamos que mi problema es que no se porque al asignar height=100% el margeninferior en vez de rellenar el hueco que queda lo amplia...

Recuerdo que cuando maquetaba mediante tablas no había este problema, puesto que creabas una tabla con tres filas, la primera para el cabecero, la segunda para el contenido y la tercera para el pie. En caso de querer replicar lo que pretendo conseguir con CSS solo tenía que indicar que el alto de la última fila era 100% y lo que no ocuparan las dos primeras lo rellenaría esta misma, sin añadir espacio alguno a la página.
__________________
"El camino empieza renunciando el control y volviéndose flexibles, como una brizna de paja en un huracán."

"Desconozco tanto... es excitante comenzar a nadar en este mar de dudas..."

Última edición por Dude--; 09/02/2010 a las 19:18
  #4 (permalink)  
Antiguo 09/02/2010, 22:12
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Div height 100% que causa scroll indeseado

Con el doctype que estas usando creo que ni con tablas podrias logar el efecto deseado; en todo caso, te recomiendo recurrir a javascript para detectar el espacio disponible y aplicar la altura necesaria para cubrirlo.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 09/02/2010, 23:15
Avatar de Dude--  
Fecha de Ingreso: junio-2004
Ubicación: Sevilla - España
Mensajes: 197
Antigüedad: 13 años, 5 meses
Puntos: 4
Respuesta: Div height 100% que causa scroll indeseado

Gracias por responder otra vez.

Es lo gracioso de CSS, se supone que debemos usarlo porque es más flexible pero a la hora de la verdad lo que conseguimos es millones de problemas adicionales y cosas sencillas con sistemas antiguos se convierten en incomprensibles y complejas, dado por el bajo soporte que los navegadores hacen de los standares...

¿Pruebo con transicional o ni lo intento?
__________________
"El camino empieza renunciando el control y volviéndose flexibles, como una brizna de paja en un huracán."

"Desconozco tanto... es excitante comenzar a nadar en este mar de dudas..."

Etiquetas: height, indeseado, scroll
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 19:28.