Javascript 计算要占用的图元的可用高度？
我在一页上有以下三个iframe。 红色Iframe包含3个主要元素，其中可滚动div是动态加载的 我想设置可滚动div加载到某个数量时的高度，以便它不会将按钮推到用户视图之外 我必须考虑jQuery选项卡高度、按钮高度和窗口/Iframe高度，然后执行Javascript 计算要占用的图元的可用高度？,javascript,jquery,Javascript,Jquery,我在一页上有以下三个iframe。 红色Iframe包含3个主要元素，其中可滚动div是动态加载的 我想设置可滚动div加载到某个数量时的高度，以便它不会将按钮推到用户视图之外 我必须考虑jQuery选项卡高度、按钮高度和窗口/Iframe高度，然后执行scrollableDivHeight=（windowHeight jQueryTabHeight buttonsHeight）。 我知道这对某些人来说可能微不足道，但我只是刚刚开始编写java脚本，非常感谢您的帮助。检测浏览器窗口的可用高度可
scrollableDivHeight=（windowHeight jQueryTabHeight buttonsHeight）。我知道这对某些人来说可能微不足道，但我只是刚刚开始编写java脚本，非常感谢您的帮助。检测浏览器窗口的可用高度可能很棘手（即依赖于浏览器）。请看一下本教程：。 您可能还需要为按钮和选项卡设置固定高度。请尝试以下代码
<script type="text/javascript" >
$(window).load(function(){ // Window load .. to ensure that images are loaded from header and footer part, then the body part is resized
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
//Internet Explorer (backward-compatibility mode):
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
//Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
// most other browsers – as well as IE9 (standards mode):
winW = window.innerWidth;
winH = window.innerHeight;
}
var headerHeight = $("#head").outerHeight(true); // include margin
var footerHeight = $("#foot").outerHeight(true); // include margin
var extraBitForIe8 = 0;
if($.browser.msie && $.browser.version==8)
extraBitForIe8= 4; // For ie 8, to avoid scroll bar
var bodyHeight = winH - headerHeight - footerHeight - extraBitForIe8
$("#body").height(bodyHeight);
})
</script>
</head>
<body >
<div id="head" style="background:red; margin:10px; padding:10px; color: white" >Header content goes here <br> Header content goes here <br> Header content goes here</div>
<div id="body" style="background:black; color:white; margin:0 10px; padding:0 10px;" >Body content goes here <br>Body content goes here <br> Body content goes here </div>
<div id="foot" style="background:yellow; margin:10px; padding:10px;" >Footer content goes here <br> Footer content goes here <br> Footer content goes here</div>
</body>
$（window）.load（function（）{//window load..要确保从页眉和页脚部分加载图像，请调整主体部分的大小
变量winW=630，winH=460；
如果（document.body&&document.body.offsetWidth）{
//Internet Explorer（向后兼容模式）：
winW=document.body.offsetWidth；
winH=document.body.offsetHeight；
}
如果（document.compatMode=='CSS1Compat'&&
document.documentElement&&
document.documentElement.offsetWidth）{
//Internet Explorer（标准模式，document.compatMode=='CSS1Compat'）：
winW=document.documentElement.offsetWidth；
winH=document.documentElement.offsetHeight；
}
if（window.innerWidth和window.innerHeight）{
//大多数其他浏览器——以及IE9（标准模式）：
winW=window.innerWidth；
winH=window.innerHeight；
}
var headerHeight=$（“#head”）。outerHeight（true）；//包括保证金
var footerHeight=$（“#英尺”）。outerHeight（true）；//包括边距
var extraBitForIe8=0；
如果（$.browser.msie&&$.browser.version==8）
extraBitForIe8=4；//对于ie 8，避免滚动条
var bodyHeight=winH-头部高度-页脚高度-附加位8
$（#body”）。身高（bodyHeight）；
})
标题内容在此处
标题内容在此处
标题内容在此处
正文内容放在这里
正文内容放在这里
正文内容放在这里
页脚内容转到此处
页脚内容转到此处
页脚内容转到此处