javascript jQuery outerHeight 没有返回正确的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15480108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery outerHeight is not returning the correct value
提问by seen_my_dog
I am trying to dynamically set the height of the webpage content by subtracting the header and footer values from the window size and setting the content to this value on document load.
我试图通过从窗口大小中减去页眉和页脚值并在文档加载时将内容设置为此值来动态设置网页内容的高度。
Each of the functions parameters takes in an element id in order to grab the element height; excluding the content parameter.
每个函数参数都接收一个元素 id 以获取元素高度；不包括内容参数。
function setH(header, content, footer)
{
winH = top.innerHeight;
winTitle = 32; // height value of the window title (part of the header)
headH = $(header).outerHeight(true);
footH = $(footer).outerHeight(true);
contentH = winH - winTitle - headH - footH;
$(content).css({'height' : (contentH) + 'px','overflow-y' : 'scroll'});
}
The issue that I am running into is the outerHeight values are returning the wrong values. The header returns 23px and footer 40px.
我遇到的问题是 outerHeight 值返回错误的值。页眉返回 23 像素，页脚返回 40 像素。
When examining the elements in FF and Chrome the values are 25px and 44px.
检查 FF 和 Chrome 中的元素时，值为 25px 和 44px。
I have tried using innerHeight,, outerHeight and outerHeight(true) but not getting the correct values.
我曾尝试使用innerHeight、outerHeight 和outerHeight(true) 但没有得到正确的值。
Any suggestions on what might be going wrong? or an alternative way to setting the height of the content dynamically? I'm running out of hair to pull so any help is appreciated.
关于可能出什么问题的任何建议？或者动态设置内容高度的另一种方法？我的头发快用完了拉，所以任何帮助表示赞赏。
Edit: I am working with content in iframes. The following: winH = top.innerHeightis getting the height value of the top most iframe window.
编辑：我正在处理 iframe 中的内容。以下内容：winH = top.innerHeight正在获取最顶部 iframe 窗口的高度值。
回答by Gavin
One thing to try which helped me is to put the code that checks outerHeight()in $(window).load()and not $(document).ready(). Obviously in many cases it's fine to use $(document.ready(), but sometimes the incorrect value of outerHeight()is caused from elements not being completely loaded.
有一两件事要尝试这让我是把代码检查outerHeight()中$(window).load()并没有$(document).ready()。显然在许多情况下使用 是可以的$(document.ready()，但有时不正确的值outerHeight()是由元素未完全加载引起的。
回答by Jefferson
I've modified a script I use for calculating screenwidth/height. See if this works:
我修改了用于计算屏幕宽度/高度的脚本。看看这是否有效：
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth;
viewportheight = window.innerHeight;
winTitle = 32;
headH = $(header).outerHeight(true);
footH = $(footer).outerHeight(true);
contentH = viewportheight - winTitle - headH - footH;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth;
viewportheight = document.documentElement.clientHeight;
winTitle = 32;
headH = $(header).outerHeight(true);
footH = $(footer).outerHeight(true);
contentH = viewportheight - winTitle - headH - footH;
}
// older versions of IE
else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}
document.getElementById("content id").style.height = contentH + "px";
