éléments de réglage sur la base scrollHeight utilisant JQuery

Question

Voici ce que j'ai jusqu'à présent:

function loadOff(){ 
    $(document).ready(function(){ 
     $("#eLoader").ajaxStop(function(){ 
      $(this).hide(); 
      $("#eventsContent").show(); 
      var h = document.body.scrollHeight; 
      $("#bodyBackground").css("height",h+100+"px"); 
      $("#sidePanel1").css("height",h-105+100+"px"); 
      $("#bottom").css("top",h+100+"px"); 
     }); 
     }); 
    } 

Ceci est une fonction de rappel pour une fonction ajax JQuery, essentiellement ce qui est fait est quand tout ajax est terminé .ajaxStop() il cache le chargeur puis montre le contenu.

Le problème que je rencontre est d'ajuster bodyBackground, sidePanel et bottom pour s'adapter au contenu. Je ne m'inquiète pas de l'avoir élastique et rétracter pour un contenu court à ce stade, je voudrais juste qu'il s'étende au bon positionnement en fonction de la longueur du contenu.

Tous les divs sont positionnés de façon absolue. Les nombres dans la fonction sont décomposés simplement pour le rendre facile à expliquer. -105 est l'offsetTop de cet élément et +100 est la marge entre la fin du contenu et les éléments.

S'il existe un moyen meilleur et plus efficace d'atteindre ce résultat, dites-le.

Merci.

Answer 1

Selon votre code, la seule chose que vous devriez voir est le top 105px de # sidePanel1. Est-ce votre intention? (H = le bas de la fenêtre, en fonction de votre code.)

Tirer avec les modèles JQuery, vous pouvez utiliser

var h = $(window).height(); 

Peut-être que vous êtes à la recherche de ce lieu de la taille de la fenêtre du navigateur? Il obtiendra la hauteur de l'élément de contenu.

$("#eventsContent").outerHeight();