我想设计一个带有横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否有可能不编写JavaScript代码，只使用CSS来完成?
我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面高度，包括横幅div元素的30px高度，所以我得到了不必要的垂直滚动条。它并不完美。
我尝试了CSS的margin, padding属性在DIV上成功地占据了网页的整个剩余高度，但这个技巧在iframe上不起作用。
<身体> < div风格= "宽度:100%;高度:30 px;background - color: # cccccc;" > < / div >旗帜 <iframe src="http: //www.google.com.tw" style="width:100%;高度:100%;" > < / iframe > 身体< / >
当前回答
你可以使用DOCTYPE，但你必须使用table。看看这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
<tr><td class="header"><div><h1>Header</h1></div></td></tr>
<tr><td class="content">
<iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
其他回答
你不能设置iframe高度为%，因为你的父体高度不是100%，所以让父体高度为100%，然后应用iframe高度为100%
For eg.
<html>
<head>
<style>
html,body{height:100%}
</style>
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
我认为你有一个概念上的问题。要说“我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面”，好吧，什么时候“100%”不等于“整个”?
你已经要求iframe填充它的容器(也就是body)的整个高度，但不幸的是，它在<div>上面有一个块级别的兄弟，你要求它的大小为30px。所以父容器的总大小现在被要求为100% + 30px > 100%!因此滚动条。
我认为你的意思是你想让iframe像帧和表单元一样消耗剩下的东西，即height="*"。IIRC，这个不存在。
不幸的是，据我所知，也没有办法有效地混合/计算/减去绝对和相对单位，所以我认为你只有两个选择:
绝对定位你的div 会把它从容器里拿出来吗 单独的iframe将消耗它的 容器的高度。这就剩下你 还有各种各样的问题 虽然，但也许是为了你 做不透明或对齐将 好的。 或者，您需要指定 %高度的div和减少 iframe的高度减去那么多。 如果绝对高度是 这很重要，你需要申请 这是div的子元素 代替。
类似的答案@MichAdel，但我使用JQuery和更优雅。
<script type="text/javascript">
$(document).ready(function() {
var $iframe = $('#iframe_id')[0];
// Calculate the total offset top of given jquery element
function totalOffsetTop($elem) {
return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
}
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= totalOffsetTop($iframe);
$iframe.height = Math.max(0, height) + 'px';
}
$iframe.onload = resizeIframe();
window.onresize = resizeIframe;
});
</script>
iframe_id为iframe标签的ID
另一种方法是使用position: fixed;在父节点上。 如果我没记错的话，位置是固定的;将元素绑定到视口，因此，一旦你给这个节点宽度:100%;及高度:100%;属性，它将横跨整个屏幕。从这一点开始，你可以把<iframe>标签放在它里面，并跨越剩余的空间(包括宽度和高度)，简单的宽度:100%;高度:100%;CSS指令。
示例代码
body { margin: 0px; padding: 0px; } /* iframe's parent node */ div#root { position: fixed; width: 100%; height: 100%; } /* iframe itself */ div#root > iframe { display: block; width: 100%; height: 100%; border: none; } <html> <head> <title>iframe Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="root"> <iframe src="http://stackoverflow.com/"> Your browser does not support inline frames. </iframe> </div> </body> </html>
另一种选择是使用vh
<iframe src='/' style="display:block; border:none; height:100vh; width:100%;"></iframe>
