Scroll Vertical en un div 100% alto.

dooplanillo · #1 (**permalink**) 21/05/2009, 04:02

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>

Mikmoro · #2 (**permalink**) 21/05/2009, 04:27

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.

dooplanillo · #3 (**permalink**) 21/05/2009, 07:39

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.

DragonX · #4 (**permalink**) 21/05/2009, 07:57

Cita:

Iniciado por dooplanillo

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....

dooplanillo · #5 (**permalink**) 21/05/2009, 08:04

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 ¿?

DragonX · #6 (**permalink**) 21/05/2009, 08:14

Código css:

Ver original#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!

dooplanillo · #7 (**permalink**) 21/05/2009, 08:26

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.

Mikmoro · #8 (**permalink**) 21/05/2009, 10:07

Cita:

Iniciado por dooplanillo

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?

DragonX · #9 (**permalink**) 21/05/2009, 10:16

punto para mik ese div no tiene altura!

dooplanillo · #10 (**permalink**) 21/05/2009, 10:38

Cierto, perdón, el div #contenido no tenía altura, ya le he puesto height:100% y sigue igual

Mikmoro · #11 (**permalink**) 21/05/2009, 10:43

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?

dooplanillo · #12 (**permalink**) 21/05/2009, 10:58

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.

Mikmoro · #13 (**permalink**) 21/05/2009, 11:32

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">

<div id="colIz"></div>

<div id="colDer"></div>

<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.

dooplanillo · #14 (**permalink**) 21/05/2009, 12:00

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

Mikmoro · #15 (**permalink**) 21/05/2009, 16:31

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.

dooplanillo · #16 (**permalink**) 22/05/2009, 01:57

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.