Question

Ive got a javascript calculating the height of a iframe element and the document height. Then use a if to see if the iframe element is on or off. When its off the height is 1px and display is none. When its on the height is 34px and display is block. I do all this with another function that is irrelevant to this question. The question is why when I change pages if the height is less then the previous page it dosen’t recalculate the height and set it correctly, BUT if the height is bigger then the previous page it does recalculate and sets the height acordingly. Im using a onload=”javascript:autoHeight” on the body tag of every page so that it recalls the function every time the diferent page loads and only when its done loading so it gets the height correctly. If you need more code: http://alomadruga.com.br/temp/home.php

function autoHeight(){
var docHeight = $(document).height();
var radioHeight = parent.$("#radioiframe").height();
if (radioHeight == 34){
    parent.$('#content').css({'height': docHeight + 34+ 'px'});
    alert("radio iframe is on");
}
else {
    parent.$('#content').css({'height': docHeight+ 'px'});
    alert("radio iframe is off");
}
};

Thanks for every ones help but I managed to figure it out on my own and decided I would post the answer to help whoever comes by this question. What i did is that every time it runs the function I set the height to 1px first then let it run the function.

function autoHeight(){
    parent.$('#content').css({'height': 1+ 'px'});
var docHeight = $(document).height();
var radioHeight = parent.$("#radioiframe").height();
if (radioHeight == 34){
    parent.$('#content').css({'height': docHeight + 34+ 'px'});
    alert("radio iframe is on");
}
else {
    parent.$('#content').css({'height': docHeight+ 'px'});
    alert("radio iframe is off");
}
};

Answer 1

Try to apply this CSS:

html {height:100%}

body {
    margin:0; padding:0;
    height:auto !important;
    height:100%;
    min-height:100%;
    position:relative;
}