web-dev-qa-db-fra.com

Curseur jQueryUI: élément absolument positionné et hauteur du conteneur parent

J'ai un exemple sur http://jsfiddle.net/SsYwH/

Au cas où cela ne fonctionnerait pas

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;
}

Problème

J'utilise jQuery pour créer un effet de curseur. Pour ce faire, je dois définir la position absolue.

  • Le bloc rouge dans mon code est le curseur absolu de position.
  • Le bloc vert est le conteneur.

Je veux toujours que le conteneur soit réglé par sa hauteur d'enfant. Maintenant, il ne le sait pas à cause de la position absolue. Solution?

cssjquery-uipositionheightabsolute
19
Jens Törnell

Ensuite, vous devrez également utiliser jQuery pour fixer la hauteur de la division du conteneur. Ainsi:

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 );
    });
});

Cependant, c'est faux, car un élément positionné en absolu peut se trouver à l'extérieur de son conteneur. Ce que vous avez vraiment, c'est quelque chose qui trouvera le bas de l'élément qui se trouve le plus bas dans le div contenant, par rapport à la vue.

7
b01

Les éléments parfaitement positionnés ne comptent pas dans le contenu du récipient en termes de flux et de dimensionnement. Une fois que vous avez positionné quelque chose de manière absolue, ce sera comme s'il n'existait pas en ce qui concerne le conteneur, il n'y a donc aucun moyen pour le conteneur "d'obtenir des informations" de l'enfant via CSS.

Si vous devez permettre à votre scroller d'avoir une hauteur déterminée par ses éléments enfants sans Javascript, votre seul choix peut être d'utiliser un positionnement relatif.

24
Steven
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>

Cela devrait faire ce que vous voulez. Notez que cela suppose que l'élément positionné absolument doit être un enfant immédiat.

Notez également que vous supprimez le '+=' + dans la fonction hauteur si vous voulez que l'élément parent ait 100% de hauteur de son élément enfant.

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

5
Tyler Crompton

Vous pouvez faire quelque chose comme ça avec jquery. Appelez 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; 
}

Cela passera par tous les descendants et trouvera la hauteur maximale et retournera la différence entre les childs.offset () + ses hauteur, puis soustrayez cela des éléments décalés.

2
Leon