div desplazable en altura variable, posicionado en relación con el hermano de altura variable

Hace poco hice esta pregunta: overflow (scroll) - 100% container height sobre cómo lograr un div desplazable verticalmente con altura variable.div desplazable en altura variable, posicionado en relación con el hermano de altura variable

un usuario muy útil proporcionó una solución usando el posicionamiento absoluto y la altura: 100%, aquí: http://jsfiddle.net/TUwej/2/. En este violín, puede ver el comportamiento básico deseado: el desplazamiento del div llenará la altura del contenedor principal como lo determina el contenido en el elemento '#main'.

Modifiqué este algo y usé arriba: 0 abajo: 0 en vez de altura: 100% para acomodar un elemento sobre el área desplazable. la versión modificada se puede ver aquí: http://jsfiddle.net/N6muv/3/ (me doy cuenta de que hay un poco de marcado extra y definiciones de clase que están vacías, y un combinador de hermanos adyacente que parece redundante - estos son vestigios de la estructura real)

todo está bien, excepto que tuve que proporcionar una coordenada superior fija para el desplazamiento div (tenga en cuenta la parte superior: declaración de 120px para el selector '.sidebar-list'). Me gustaría que esto sea relativo al elemento '.sidebar-options' situado encima de él, de modo que el contenedor de opciones anterior pueda tener cualquier cantidad de opciones y el div desplazable se posicionará de manera apropiada. utilizando coordenadas fijas, si se agregan o eliminan algunas opciones, se produce una superposición o se desarrolla un espacio innecesario; me gustaría evitar esto. la cantidad exacta de opciones que deberían aparecer varía según las vistas.

pensé en envolver el div desplazable en un contenedor relativamente posicionado, pero hacerlo crea un conflicto con el fondo: 0 ya no indica la altura del contenedor principal '.wrapper' (lo que debería hacer). de manera similar, usando la altura: 100% usará la altura calculada del contenedor '.wrapper' para que el div desplazable se extienda más allá del límite de '.wrapper'.

¿hay alguna manera de mantener la funcionalidad que se muestra en el segundo violín, pero con la parte superior del div desplazable en relación con la parte inferior de las opciones div (que será de altura variable)?

gracias de antemano por cualquier sugerencia.

EDITAR: S.O. Me preguntaron si quería comenzar una recompensa, así que lo hice (por primera vez). Espero que 100 puntos no se consideren demasiado bajos. sigue buscando una solución sin script, pure-css que no implique coordenadas fijas o dimensiones para el eje y (el ancho y las asignaciones a la izquierda son correctas). THX

Fuente

2011-02-07 momo

ACTUALIZACIÓN:

importación JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Nueva Demostración: http://jsfiddle.net/Mutant_Tractor/N6muv/28/

Añadir este pequeño script de jQuery a su página:

var contentColHeight = $('.content').height(); 
var optionColHeight = $('.sidebar-options').height(); 
var newHeight = contentColHeight - optionColHeight; 
$('.sidebar-list').height(newHeight);

OLD

¿Cómo funciona esto se adapten a sus necesidades? http://jsfiddle.net/Mutant_Tractor/N6muv/4/

me cambiaron a position:absolute;position:relative y añadió un height:190px estática, así como la adición de background:pink; (por lo que el bg siempre se ve bien)

Usted puede tratar de añadir y eliminar las opciones de la lista anterior de demostración de esto.

código completo:

.sidebar-content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background : pink; 
}

Fuente

2011-02-08 13:19:22

@Myles Gray: gracias por la respuesta, pero la altura de .sidebar debe coincidir con la altura del div .content, independientemente de lo que contenga. así es como funciona actualmente. agregar una altura fija hará que esa parte de la funcionalidad falle. – momo

@BigMoMo Entiendo ahora, ¿quiere que la altura de la barra lateral DESPLAZABLE sea fluida? –

@Myles Gray: prácticamente todas las alturas y las coordenadas del eje Y deben ser fluidas. la altura de la barra lateral (que contiene las opciones de la barra lateral y la lista de la barra lateral) debe mantener la misma altura que .content (lo hace actualmente). las opciones de la barra lateral deben ser tan grandes como debe ser, y la lista de barras laterales debe ocupar todo el espacio restante (ahora sí), y desplazarse por cualquier exceso. aquí hay un pequeño y sucio ejemplo del comportamiento deseado de la red usando tablas que SOLAMENTE funcionan en webkit (safari, chrome): http://jsfiddle.net/3mevq/ - puede agregar contenido a cualquiera de las tres áreas que todo lo mantiene. – momo

creo que se debe eliminar el posicionamiento absoluto en los elementos internos y tratar overflow: auto.

Fuente

2011-02-16 18:11:13 madr

Debe definir la altura de la lista de la barra lateral, ya que debe configurar este contenido como desplazable y debe definirse una altura mínima o máxima. Y se podría establecer .sidebar-list{position: relative;} ver este Fiddle

Editar Su .sidebar-content también deben ser posicionadas relativamente Ver este Fiddle cualquier contenido de su 'opciones' contiene.

Fuente

2013-04-02 12:58:40

div desplazable en altura variable, posicionado en relación con el hermano de altura variable

Respuesta

Cuestiones relacionadas