Foros del Web » Creando para Internet » CSS »

Scroll Vertical en un div 100% alto.

Estas en el tema de Scroll Vertical en un div 100% alto. en el foro de CSS en Foros del Web. Buenas a todos, os expongo mi problema, que por más vueltas que le doy no soy capaz de superar, primero os explico un poco de ...
  #1 (permalink)  
Antiguo 21/05/2009, 05:02
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Scroll Vertical en un div 100% alto.

Buenas a todos, os expongo mi problema, que por más vueltas que le doy no soy capaz de superar, primero os explico un poco de que va la cosa y a continuación os pongo el código:

Tengo una web, al 100% de alto tanto el html como el body (el html también tiene overflow:hidden, ya que solo quiero que me salga scroll en un div en concreto) con 3 columnas, en la columna central (que es donde está todo el contenido) debajo de la cabecera, tenemos el div "contenido" también con una altura del 100%. Este div, cuando sea pertinente debe aparecer un scroll vertical, y no soy capaz de dar con la clave.

Si pongo overflow:auto en el div colCentral si me sale el scroll, pero solo en la cabecera.

Muchas gracias por la ayuda.

Estas son las css (os quito la "morralla" del código para que se vea más claro:
Código:
/* GENERALES */
html{height:100%; overflow:hidden;}
body{height:100%; font: 100%; padding:0; margin:0; text-align:center;}
ol,ul {list-style:none;}
img{border:0;}

/* POSICIONAMIENTO DE TODAS LAS COLUMNAS */
#contenedor {width: 100%;height:100%; margin: 0 auto; text-align: left; min-width:1020px;} 
#colIz{float: left; height:100%; width: 15%; background: #ffffff; border-right:solid 2px #ffb006;}
#colDer{float: right; height:100%; width: 15%; background: #ffffff; border-left:solid 2px #ffb006;}
#colCentral{text-align:left; height:100%;}

/*Contenido*/
#contenido{padding:20px 4px; text-align:left; font-size:0.7em; overflow:auto;}
#contenido p{padding:0 20px;  }

/* Varias clases diversas para su reutilización */
.fltrt {float: right;margin-right: 10px; margin-top:3px;}
.fltlft {float: left;}
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
Y aquí el html:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".../TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin t&iacute;tulo</title>
<link href="App_Themes/estilos2.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="contenedor">
	<!-- COLUMNA IZQUIEDA -->
	<div id="colIz"></div>
	
    <!-- COLUMNA DERECHA -->
	<div id="colDer"></div>
    
    <!-- CONTENIDO -->
	
	<div id="colCentral">
		<div id="cabecera">Aqui viene el menu, logos, etc...</div>
		<div id="contenido">Este es el div en cuestión, cuando haya más contenido que lo que ocupe la ventana del navegador, debería salir el scroll
                </div>
        </div>
       <br class="clearfloat" />
</div>

</body>
</html>
  #2 (permalink)  
Antiguo 21/05/2009, 05:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Scroll Vertical en un div 100% alto.

Por lo que veo el div contenido no tiene alto definido, por lo que no puede mostrar el scroll: es necesario un height para que al superarlo aparecezca el scroll.
  #3 (permalink)  
Antiguo 21/05/2009, 08:39
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Scroll Vertical en un div 100% alto.

Claro, pero la cuestión es que al igual que el html, el body y la colCentral, el div contenido tiene un height de 100%, para que sea cual sea tu resolución, siempre llegue al final de la ventana del navegador.
  #4 (permalink)  
Antiguo 21/05/2009, 08:57
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Scroll Vertical en un div 100% alto.

Cita:
Iniciado por dooplanillo Ver Mensaje
Claro, pero la cuestión es que al igual que el html, el body y la colCentral, el div contenido tiene un height de 100%, para que sea cual sea tu resolución, siempre llegue al final de la ventana del navegador.
Y entonces para que necesitas un scroll en ese div, si se estira al 100% de alto el scroll te lo da en browser....
  #5 (permalink)  
Antiguo 21/05/2009, 09:04
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Scroll Vertical en un div 100% alto.

Bien, el html tiene un overflow hidden para que no se vea el scroll en en navegador.
El diseño de la web en cuestión tiene unas lineas en las columnas laterales que deben llegar al final de la ventana del navegador, sea la resolución que sea
y lo que quiero es que el div contenido, tenga un scroll que llegue al final del navegador, cualquiera que sea la resolución que tengas o las barras de herramientas que tengas visibles en el navegador, no se si me explico ....

No se si esto es viable o hay otra forma de plantearlo ¿?
  #6 (permalink)  
Antiguo 21/05/2009, 09:14
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Scroll Vertical en un div 100% alto.

Código css:
Ver original
  1. #contenedor {width: 100&#37;;height:100%; margin: 0 auto; text-align: left; min-width:1020px;overflow-y:scroll;}

proba diciendole al contenedor que tenga scroll vertical!
  #7 (permalink)  
Antiguo 21/05/2009, 09:26
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Scroll Vertical en un div 100% alto.

No funciona, pero algo hemos mejorado, el scroll sale, pero se pierde por el final de la página (no sale el manejador de abajo) además, si intento arrastrar la barra hacia abajo, no hace scroll.
  #8 (permalink)  
Antiguo 21/05/2009, 11:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Scroll Vertical en un div 100% alto.

Cita:
Iniciado por dooplanillo Ver Mensaje
tenemos el div "contenido" también con una altura del 100%.
O no te estás explicando bien o no te estoy entendiendo

Cita:
#contenido{padding:20px 4px; text-align:left; font-size:0.7em; overflow:auto;}
¿Dónde ves esa altura del 100% en el div #contenido?
  #9 (permalink)  
Antiguo 21/05/2009, 11:16
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Scroll Vertical en un div 100% alto.

punto para mik ese div no tiene altura!
  #10 (permalink)  
Antiguo 21/05/2009, 11:38
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Scroll Vertical en un div 100% alto.

Cierto, perdón, el div #contenido no tenía altura, ya le he puesto height:100% y sigue igual
  #11 (permalink)  
Antiguo 21/05/2009, 11:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Scroll Vertical en un div 100% alto.

Muy bien, volvamos a empezar: tú quieres que cuando crezca el contenido del div <div id="contenido">, apararezca un scroll sólo en este div, sin embargo le pones un height de 100% y eliminas el scroll de html y de body.
¿Es correcto?
  #12 (permalink)  
Antiguo 21/05/2009, 11:58
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Scroll Vertical en un div 100% alto.

Bueno realmente me da igual que el scroll sea visible siempre, pero que aparezca solo en ese div (div id="contenido"). El tema del 100% es porque las lineas verticales en #colIz, #ColDer y el final del scroll deben llegar al final de la ventana del navegador, seal cual sea la resolución del usuario que esté viendo la web.
  #13 (permalink)  
Antiguo 21/05/2009, 12:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Scroll Vertical en un div 100% alto.

Pues ya sí me vas a perdonar, pero ahora es cuando no entiendo nada. ¿Acaso con este código (tu código), no es eso lo que ocurre?:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<style type="text/css">
html{height:100%; overflow:hidden;}
body{height:100%; font: 100%; padding:0; margin:0; text-align:center;}
ol,ul {list-style:none;}
img{border:0;}

/* POSICIONAMIENTO DE TODAS LAS COLUMNAS */
#contenedor {width: 100%;height:100%; margin: 0 auto; text-align: left; min-width:1020px;}
#colIz{float: left; height:100%; width: 15%; background: #ffffff; border-right:solid 2px #ffb006;}
#colDer{float: right; height:100%; width: 15%; background: #ffffff; border-left:solid 2px #ffb006;}
#colCentral{text-align:left; height:100%;}

/*Contenido*/
#contenido{padding:20px 4px; text-align:left; font-size:0.7em; overflow:;height:100%;}
#contenido p{padding:0 20px; }

/* Varias clases diversas para su reutilización */
.fltrt {float: right;margin-right: 10px; margin-top:3px;}
.fltlft {float: left;}
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
</head>
<body>
<div id="contenedor">
<!-- COLUMNA IZQUIEDA -->
<div id="colIz"></div>
<!-- COLUMNA DERECHA -->
<div id="colDer"></div>
<!-- CONTENIDO -->
<div id="colCentral">
<div id="cabecera">Aqui viene el menu, logos, etc...</div>
<div id="contenido">Este es el div en cuestión, cuando haya más contenido que lo que ocupe la ventana del navegador, debería salir el scroll
</div>
</div>
<br class="clearfloat" />
</div>
</body>
</html>
Si añades párrafos al div #contenido aparece el scroll vertical, tanto en Firefox como en IE6, o si cambias el overflow auto por overflow: scroll, el scroll aparece en ese div sin necesidad de añadir nada.

Comprueba y dime qué es lo que no estoy entendiendo, por favor.
  #14 (permalink)  
Antiguo 21/05/2009, 13:00
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Scroll Vertical en un div 100% alto.

Puedes ver un ejemplo de como queda aqui:

ddd.softmedia.es/turismo/

te he puesto el div contenido con un borde verde de 1 px para ver hasta donde llega. El caso es que tiene overflow:auto y no sale scroll
  #15 (permalink)  
Antiguo 21/05/2009, 17:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Scroll Vertical en un div 100% alto.

A ver si me explico bien: tu has puesto un alto del 100% a html y a body; despues le pones el 100% a #contenido, es decir, que mide lo mismo que html y que body; pero date cuenta de una cosa: antes de #contenido tienes la cabecera (con 203px de alta), por lo que si #contenido mide el 100%, tiene el tamaño de toda la zona visual más 203px, es decir, que desborda por abajo sin remedio, y como body no tiene scroll no se puede ver la zona de abajo, si no te habrías dado cuenta de que en realidad, con el contenido que has metido no desbordas a #contenido como para que saque el scroll.
Inevitablemente tienen que perderse 203px por abajo fuera de la zona visual.

Si te quieres asegurar, cambia el height: 100% de contenido por un 55%, por ejemplo, y verás qué ocurre.
  #16 (permalink)  
Antiguo 22/05/2009, 02:57
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Scroll Vertical en un div 100% alto.

Efectivamente, el div #contenido sobrepasa en altura la medida de la cabecera. El problema es el siguiente, en ie que tengo pocas barras de herramientas y mucha más visión de lo que es la ventana de navegación, me llega al final con un 62%, en cambio en FF que tengo bastantes más herramientas y menos ventana se me pasa el scroll.

En cualquier caso en:
3uvedobles.turismosevilla.org/interior.php3?idi=cas&ruta=alojamientos&apdo2=busq ueda

Funciona lo que quiero hacer, aunque el código es un poquito caótico, veré si puedo sacarlo.

Muchas gracias a los 2.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:42.