Javascript 如何计算Iframe的高度？
我想在页眉组件和页脚组件之间插入Iframe，如何计算Iframe屏幕的高度？ 注：（页眉和页脚的内容可能会更改）Javascript 如何计算Iframe的高度？,javascript,css,reactjs,Javascript,Css,Reactjs,我想在页眉组件和页脚组件之间插入Iframe，如何计算Iframe屏幕的高度？ 注：（页眉和页脚的内容可能会更改） css: .iFrame屏幕{ 位置：绝对位置； 右：0； 顶部：-100px； z指数：1； 身高：110%； 宽度：100%； 边界：无； 溢出y：自动； 溢出x：隐藏； } 未测试，但您可以尝试一下。请注意，如果页眉和页脚上没有固定高度，则此操作将失败。calc（）计算视图高度减去页眉高度减去页脚高度 <body> <div id="page">
css:
.iFrame屏幕{
位置：绝对位置；
右：0；
顶部：-100px；
z指数：1；
身高：110%；
宽度：100%；
边界：无；
溢出y：自动；
溢出x：隐藏；
}
calc（）<body>
<div id="page">
<header id="pageHeader">
</header>
<main id="pageMain">
<iframe src="..."></iframe>
</main>
<footer id="pageFooter">
</footer>
</div>
</body>
只需显示您的代码。在网站中插入的iframe代码中，可以手动设置高度和宽度。如果页眉和页脚具有动态高度，则只能使用JavaScript。您正在查找视口高度-页眉高度-页脚高度。欢迎使用堆栈溢出！请通读一遍，尤其是你在这里的最佳选择是做你的研究，对于相关的话题等等，并尝试一下。如果你在做了更多的研究和搜索后陷入困境，无法摆脱困境，请发布一份你的尝试，并明确指出你陷入困境的地方。人们会很乐意提供帮助。使用推荐代码编辑我收到了这个错误：“Uncaught TypeError:无法读取未定义的@Moeez Saiyam的属性‘document’”。虽然这个代码可能会解决这个问题，但如何以及为什么解决这个问题会真正有助于提高您的帖子质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。
function calcHeight()
{
//find the height of the internal page
var the_height = document.getElementsByTagName('iframe')[0].contentWindow.document.body.scrollHeight;
console.log('Iframe Height is ' + the_height + ' pixels');
};
<body>
<div id="page">
<header id="pageHeader">
</header>
<main id="pageMain">
<iframe src="..."></iframe>
</main>
<footer id="pageFooter">
</footer>
</div>
</body>
html, body {
height: 100%;
margin: 0;
}
header, footer, main {
display: block;
}
#page {
min-height: 100%;
}
#pageHeader {
height: 70px; /* or something else */
}
#pageFooter {
height: 90px; /* or something else */
}
#pageMain {
position: relative;
height: calc(100vh - 160px); /* 100vh minus (header + footer) */
}
#pageMain iframe {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 100%;
border: 0;
}