css - example - Control deslizante jQueryUI: elemento posicionado absolutamente y altura del contenedor principal

jquery ui select

Question

Tengo un ejemplo en http://jsfiddle.net/SsYwH/

En caso de que no funcione.

HTML:

<div class="container">
   <div class="absolute">
       Testing absolute<br />
       Even more testing absolute<br />
   </div>
   A little test<br />
</div>

CSS:

.container {
    background: green;
}
.absolute {
    position: absolute;
    background: red;
}

Problema

Uso jQuery para crear un efecto deslizante. Para hacer eso necesito establecer la posición absoluta.

• El bloque rojo en mi código es el control deslizante de posición absoluta.
• El bloque verde es el contenedor.

Todavía quiero que el contenedor se ajuste por su altura de niño. Ahora no lo sabe por la posición absoluta. ¿Solución?

Answer 1

Entonces también necesitarás usar jQuery para arreglar la altura del div contenedor. Al igual que:

http://jsfiddle.net/khalifah/SsYwH/24/

$( document ).ready(function() {
    $( ".container" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
});

Sin embargo, esto es incorrecto, ya que un elemento posicionado absoluto puede quedar fuera de su contenedor. Lo que realmente es algo que encontrará la parte inferior del elemento que se encuentra más abajo en el div que contiene, con respecto a la vista.

Answer 2

Los elementos de posición absoluta no cuentan para el contenido del contenedor en términos de flujo y tamaño. Una vez que coloque algo absolutamente, será como si no existiera en lo que respecta al contenedor, por lo que no hay forma de que el contenedor "obtenga información" del niño a través de CSS.

Si debe permitir que su control de desplazamiento tenga una altura determinada por sus elementos secundarios sin Javascript, su única opción puede ser utilizar la posición relativa.

Answer 3

Puedes hacer algo como esto con jQuery. Llamada ghoape (jqueryElement).

var ghoape = function getHeightOfAbsolutelyPositionedElement( element ){
    var max_y = 0;
    $.each( $(element).find(''*''), function(idx, desc){
        max_y = Math.max(max_y, $(desc).offset().top + $(desc).height() );

    });

    return max_y - $(element).offset().top; 
}

Esto irá a través de todos los descendientes y buscará la altura máxima y devolverá la diferencia entre childs.offset () + su altura y luego la restará de la compensación de elementos.

Answer 4

jQuery(''.container > .absolute'').each(function() {
    jQuery(this).parent().height(''+='' + jQuery(this).height());
    jQuery(this).css(''position'', ''absolute'');
});

.container {
    background: green;
    position: relative;
}
.absolute {
    position: absolute;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="absolute">Testing absolute<br />Even more testing absolute<br /></div>
    Yo
</div>

Esto debería hacer lo que estás queriendo. Tenga en cuenta que esto supone que el elemento absolutamente posicionado debe ser un elemento secundario inmediato.

También tenga en cuenta que quita ''+='' + en la función de altura si desea que el elemento padre tenga el 100% de altura de su elemento hijo.

http://jsfiddle.net/SsYwH/21/