Ajuster automatiquement la hauteur iframe à l'intérieur d'un en-tête et d'un pied de page statique

Question

J'ai une page avec un en-tête statique et un pied de page qui est affiché sur l'ensemble des pages. J'ai alors un iframe qui est affiché entre l'en-tête et le pied de page. Actuellement, l'iframe a une hauteur statique. Je voudrais ajuster la hauteur en fonction de la hauteur de la page intérieure, puisque l'iframe contient une application qui doit être affichée dans une page externe. Par conséquent, la page externe contient un en-tête et un pied de page et entre ceux-ci l'application (à l'intérieur d'un iframe) est affichée. Il y a beaucoup de pages dans cette application et par conséquent j'ai besoin de faire de l'iframe pour ajuster automatiquement la hauteur.

En dehors de l'iframe, j'ai aussi besoin de régler la hauteur du div où l'iframe est placé. Par conséquent, je dois ajuster la hauteur de l'iframe lui-même et du conteneur div aussi bien lors du changement de page.

Comment puis-je y parvenir?

Merci à l'avance

Answer 1

function resizeContainer() { 
    var coordCont = getCoordinates($('#myContainer')); 
    var h = $(window).height() - coordCont.top - 18; 
    var minH = 800; 
    $('#myContainer').css({ height: h < minH ? minH : h, overflow: 'auto' }); 
}; 

get coordonnées est une fonction personnalisée de mes obtenir à gauche/haut/largeur/hauteur/zIndex d'un élément. J'utilise aussi minH car je ne veux pas que le contenu soit inférieur alors disons 800. La même chose que vous pouvez appliquer pour le iFrame