Définition d'une marge sur un élément en fonction de la hauteur du navigateur et de la hauteur d'un autre élément à l'aide de JQuery

Question

Je code un site dont le titre est incliné à 270 degrés et qui est fixé au bas de la page; ce titre change pour chaque page et je voudrais que le contenu commence à la même hauteur verticale que le titre commence au chargement de la page. Donc, disons que le navigateur a une hauteur de 900 pixels et que le titre est 500 pixels. J'aimerais que la marge supérieure du contenu div soit de 400 pixels. Existe-t-il un moyen facile de faire cela avec JQuery? Je sais que vous devrez d'abord obtenir les deux hauteurs et ensuite former une équation, mais je suis trop amateur à JQuery pour le faire. Aidez-moi?

Answer 1

Vous pouvez le faire avec le script suivant, en remplaçant #content avec votre récipient et h1 avec l'élément de tête fixé au fond:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#content").css("margin-top", $(window).height() - $("h1").height()); 
}); 
</script> 

Ceci, cependant, ne fixe que margin-top sur la charge de la page, il ne ne pas mettre à jour la marge si l'utilisateur redimensionne la fenêtre de son navigateur. Ceci à la rescousse (de nouveau en remplaçant les éléments, évidemment):

<script type="text/javascript"> 
$(window).resize(function() { 
    $("#content").css("margin-top", $(window).height() - $("h1").height()); 
}); 
</script>