Elemento con posición fija dentro de una DIV con scrollbars

ryugen · #1 (**permalink**) 22/04/2011, 15:31

Hace rato que estoy intentando hacer esto. Pero no he logrado hacerlo puro CSS, actualmente en mis pruebas de concepto lo estoy solucionando con jquery, pero esto hace que el posicionamient o sea algo lento y sea parpadeando.

http://testing.bitsarg.com.ar/test.html

En esa pagina pueden ver lo que estoy tratando de lograr y tambien pueden ver como lo tengo actualmente solucionado (funciona de IE 8 en adelante, no lo he probado para abajo).

Explicando un poco. Tengo un contenedor que define el tamaño de la ventana visible. Dentro el contenido puede crecer a gusto y la idea es que se formen las scroollbars. El problema resulta en que yo quiero que las etiquetas de las columnas se mantengan, para que la persona que ve la informacion siempre termina sabiendo donde esta parada. El problema (creo que no tiene solucion) es que el posicionamient o absoluto, por mas que lo haga contra el contenedor (el que tiene el ancho y alto definido, las scrollbars y posicion distinta de estatica) aun asi requiere del mini script para ir corrigiendo su posicion, por lo que estoy totalmente atado.

Igualmente si alguno se enfrentó alguna vez a algo similar, escucho ideas.

Saludos y Gracias

IsaBelM · #2 (**permalink**) 23/04/2011, 06:21

no es absolute, sino fixed

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
.notice {
height: 285px;
width: 250px;
border: 1px solid black;
}

.notice p {
overflow: auto;
height: 250px;
width: 250px;
margin-top: 35px;
}

.notice div {
position: fixed;
width: 250px;
background-color: yellow;
padding: 0 0 8px 0;
}

.notice div > a {
float: right;
padding: 7px 40px 0 0;

}
</style>
</head>

<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type<br /> and scrambled it to make a type specimen book. <br />It has survived not only five centuries, but also the leap into electronic typesetting, remaining <br />essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,<br /> and more recently with desktop publishing software like Aldus PageMaker including <br />versions of Lorem Ipsum.<br /><br /><br />
<div class="notice">
<div><a href="#">Leer Mas</a></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>

ryugen · #3 (**permalink**) 23/04/2011, 08:24

Estimada IsaBeIM, si utilizo "position:fixed" en mi caso, como lo que quiero que tenga posicion fija es algo que tiene que tener scroll, si utilizo esa propiedad, lo fijo rompe el layout y queda flotando por fuera de la caja con scroll.

IsaBelM · #4 (**permalink**) 24/04/2011, 08:32

sigamos con el estilo epistolar.

querido ryugen, por alguna razón no me fijé en el scroll horizontal. con motivo de tal hecho ninguna propiedad position, solventará tu problema. si usas fixed, desbordará el bloque padre. si en el padre usas relative y en el hijo absolute, el padre no será desbordado, pero habrá desplazamiento horizontal. de tal modo que la única solución es usar alguna librería.

sin mas, se despide.

IsaBelM