iframe 到达页面底部
Posted
技术标签:
【中文标题】iframe 到达页面底部【英文标题】：iframe reaches bottom of page 【发布时间】：2012-10-20 06:04:12 【问题描述】：有没有办法让<iframe> 的高度正好到达页面底部？使用height:xx%很难判断，可能与浏览器有关。
代码如下：
<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>
【问题讨论】：
试试style="position:absolute;"
高度应该设置为多少？
它不起作用..它只是将高度设置为整个屏幕的高度。但是由于有<p ..> .. </p>这一段，iframe的底部从屏幕上掉下来了。
你能添加任何 HTML 吗？和/或，这些是您的整个页面内容吗？
可能重复：***.com/questions/90178/…
【参考方案1】：
我一直使用 height:100vh;给你100%的视口
【讨论】：
记住使用vh时仍然存在一个普遍的ios错误是明智的 - 看看caniuse.com/#feat=viewport-units
哦，谢谢！那时我不知道我会看看它。不过目前它对我有用【参考方案2】：
试试这个...
<!DOCTYPE html>
<html>
<head>
<style>
html, body
height: 100%;
margin:0px;
padding:0px;
</style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>
您可以查看演示 here
【讨论】：
【参考方案3】：你不能。我之前尝试过这个，但是 iframe 存在问题，它将保持这种状态，直到他们找到一种方法来暴露内部 html 文档的高度......遵循标准。如果您删除内部文档的 DOCTYPE，我想您将可以访问它。 Make Iframe to fit 100% of container's remaining height
【讨论】：
【参考方案4】：使用javascript/jQuery，你可以为IFRAME元素精确设置正确的维度，无需访问框架本身的DOM（跨域问题），依赖表格或绝对定位（如果框架上方的内容高度是动态的）：
$(function()
var aboveHeight = $("#aboveFrame").outerHeight(true);
$(window).resize(function()
$('#frame').height( $(window).height() - aboveHeight );
).resize();
);
示例：http://jsfiddle.net/hongaar/jsdYz/
【讨论】：
我在本地试了一下，看起来pretty much perfect。 但是它没有魔法！我还以为是 html\css 魔术特奥会，然后你带着 js-hammer 来拿奖了 :)【参考方案5】：尽管使用表格进行布局很烦人，但它们仍然是始终如一地处理垂直尺寸的最佳方式。以下仍然显示 iframe 边缘周围的一些白色像素，并且在某些版本的 Firefox 中具有额外的滚动条，但与我所能达到的一样接近：
<!DOCTYPE html>
<html style="padding:0; margin:0; height:100%">
<body style="padding:0; margin:0; height:100%">
<table style="border:0; padding:0; margin:0; height:100%; width:100%">
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0">
<p style="margin:10px"> hello </p>
</td>
</tr>
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0; height:100%">
<iframe src="http://www.weather.com" style="border:0; padding:0; margin:0; width:100%; height:100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
如果您真的想避免使用表格元素，您可能会从带有 display:table、display:table-row 和 display:table-cell 的 div 标签中获得一些吸引力，但要为某些浏览器中更烦人的怪癖做好准备。
【讨论】：
【参考方案6】：Demo
<!DOCTYPE html>
<html>
<head>
<style>
html, body
height: 100%;
margin:0px;
padding:0px;
#divHeader
height:25px;
#divContent
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
height:100%;
width:100%;
margin-top:-25px;
padding-top:25px;
overflow:hidden;
iframe
width:100%;
height:100%;
</style>
</head>
<body>
<div id="divHeader">
header
</div>
<div id="divContent">
<iframe src="http://www.weather.com"></iframe>
</div>
</body>
</html>
【讨论】：
【参考方案7】：iframe 是 body 元素的子元素，其父元素的高度为 100%，在您制作 iframe 整页之前，您必须声明 body 的高度并使其也成为整页。
试试这个。 （我认为如果你把你的 CSS 放在一个外部文件中或者只是在 head 中会更好）
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body height:100%;
iframe height:100%;width:100%;
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>
【讨论】：
【参考方案8】：我最近遇到了同样的问题。我相信您想要扩展高度以适应动态加载的内容。这就像做梦一样。 :)
<!--This script will auto size the height. Must set the id for it to work.-->
<script type="text/javascript">
<!--//
function sizeFrame()
var F = document.getElementById("myFrame");
if(F.contentDocument)
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
else
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
window.onload=sizeFrame;
//-->
</script>
【讨论】：
这仅适用于同域 iframe。【参考方案9】：如果你的<p>标签内容是固定的，那么你可以尝试this way，通过相对调整<p>和<iframe>的高度..你必须保持<html>或<body>标签高度100%否则它不会工作
【讨论】：
在您的 jsFiddle 链接中，iframe 显然没有到达页面底部...【参考方案10】：<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0; >
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:100%"></iframe>
</body>
</html>
嗯，这似乎很棘手，但您必须保持 <html> 或 <body> 标记高度 100% 才能实现此目的
【讨论】：
不起作用..它只是将高度设置为整个屏幕的高度。但是由于有<p ..> .. </p>这一段，iframe的底部从屏幕上掉下来了。以上是关于iframe 到达页面底部的主要内容，如果未能解决你的问题，请参考以下文章