Question

I have a page with a static header and footer which is displayed throughout the whole pages. I then have an iframe which is displayed between the header and footer. Currently, the iframe has a static height. I would like to adjust the height depending on the height of the inner page, since the iframe contains an application which must be displayed in an outer page.

Therefore, the outer page contains a header and a footer and between these the application (inside an iframe) is displayed. There are a lot of pages in this application and therefore I require to make the iframe to automatically adjust the height.

Apart from the iframe, I also need to adjust the height of the div where the iframe is being placed. Therefore, I have to adjust the height of the iframe itself and of the container div as well upon page change.

How can I achieve this?

Thanks in advance

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 coordinates is a custom function of mine to get left/top/width/height/zIndex of an element. I also use minH as I don’t want the content to be less then let’s say 800. The same you can apply for the iFrame