使Iframe适应容器剩余高度的100％

HTML CSS

老丝阿飞

2020-03-24

我想设计一个带有横幅和iframe的网页。我希望iframe可以填满所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以仅使用CSS而无需编写Javascript代码来完成它？

我尝试height:100%在iframe上进行设置，结果非常接近，但是iframe尝试填充整个页面高度，包括30pxbanner div元素的高度，因此我得到了不必要的垂直滚动条。这不是完美的。

更新说明：对不起，我没有很好地描述问题，我尝试使用CSS边距，DIV上的padding属性成功占据了整个页面的刷新高度，但该技巧在iframe上不起作用。

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>

任何想法表示赞赏。

第3504篇《使Iframe适应容器剩余高度的100％》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共18个回答

Tom乐小小 2020.03.24

为什么不这样做（对主体填充/边距进行细微调整）

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>

神无Stafan 2020.03.24

我认为使用CSS位置实现此方案的最佳方法。设置相对于您的父div的位置和position：absolute到您的iframe。

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}

<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>

对于其他填充和边距问题，现在css3 calc（）非常先进，并且几乎也与所有浏览器兼容。

检查calc（）

阿飞 2020.03.24

您无法以％设置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>

伽罗理查德 2020.03.24

如果您有权访问将要加载的iframe的内容，则可以在调整大小时告诉其父项重新调整大小。

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

如果页面上有多个iframe，则可能需要使用id或其他巧妙的方法来增强.find（“ iframe”），以便选择正确的iframe。

米亚 2020.03.24

虽然我同意JS似乎是一个更好的选择，但我有一个仅CSS可用的解决方案。缺点是，如果您必须经常向iframe html文档中添加内容，则必须调整一个百分比的谷值时间。

解：

尝试不要同时为您的html文档指定任何高度，

html, body, section, main-div {}

然后只编码：

#main-div {height:100%;}
#iframe {height:300%;}

注意：div应该是您的主要部分。

这应该相对有效。iframe确实会准确计算可见窗口高度的300％。如果第二个文档（在iframe中）的html内容的高度小于浏览器高度的3倍，则可以正常工作。如果您不需要经常向该文档添加内容，这是一个永久性的解决方案，您可以根据自己的内容高度找到自己所需的％。

之所以有效，是因为它阻止了第二个html文档（一个被嵌入）从父html文档继承其高度。它可以防止出现这种情况，因为我们没有为它们两个都指定高度。当我们给孩子一个％的时候，它会寻找它的父母，如果不是，它将取其内容高度。而且只有在其他容器没有指定高度的情况下，我才尝试这样做。

凯理查德 2020.03.24

或者您可以去老学校并使用框架集：

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>

Itachi 2020.03.24

“ Seamless ”属性是旨在解决此问题的新标准：

http://www.w3schools.com/tags/att_iframe_seamless.asp

分配此属性时，它将删除边框和滚动条，并将iframe调整为其内容大小。尽管仅Chrome和最新版Safari支持

此处的更多信息： HTML5 iFrame Seamless属性

小卤蛋 2020.03.24

您可以通过在加载/调整大小事件中测量主体大小并将高度设置为（全高-标语高度）来做到这一点。

请注意，当前在IE8 Beta2中您无法按此大小执行此操作，因为该事件当前在IE8 Beta2中已中断。

古一 2020.03.24

它将与下面提到的代码一起使用

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>

小卤蛋 2020.03.24

我认为您在这里有一个概念上的问题。要说“我尝试在iframe上设置height：100％，结果非常接近，但iframe试图填满整个页面”，那么，何时“ 100％”不等于“整个”？

您已要求iframe填充其容器（即主体）的整个高度，但不幸的是，它在<div>中具有块级同级，要求将其设为30px大。因此，现在要求将父容器的总尺寸设置为100％+ 30px> 100％！因此，滚动条。

我想您的意思是，您希望iframe 像框架和表格单元格一样使用剩余的东西，即height =“ *”。IIRC这不存在。

不幸的是，据我所知，也没有办法有效地混合/计算/减去绝对和相对单位，因此我认为您只能选择两种：

绝对定位div，将其从容器中取出，这样仅iframe便会消耗其容器高度。尽管这会给您带来其他各种问题，但是对于您正在做的事情来说，不透明或对齐可能没问题。
另外，您需要为div指定高度百分比，并将iframe的高度减少那么多。如果绝对高度真的很重要，则需要将其应用于div的子元素。

路易Gil 2020.03.24

您可以使用html / css这样进行操作：

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>

Stafan路易 2020.03.24

我使用display：table来解决类似的问题。它几乎适用于这一点，留下一个小的垂直滚动条。如果您尝试使用除iframe之外的其他内容填充该灵活列，那么它会很好地工作（而不是

采取以下HTML

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

将外部div更改为使用display：table并确保已设置宽度和高度。

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

将横幅广告设置为表格行，并将其高度设置为您的首选项：

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

在iframe（或所需的任何内容）周围添加一个额外的div，并将其设置为高度设置为100％的表格行（如果要嵌入iframe来填充高度，则设置其高度至关重要）

.iframe-container {
  display: table-row;
  height: 100%;
}

下面是一个jsfiddle，显示了它的工作状态（没有iframe，因为在小提琴中似乎不起作用）

https://jsfiddle.net/yufceynk/1/

JinJin 2020.03.24

HTML5的新功能：使用calc（高度）

<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>

乐米亚 2020.03.24

没错，您所展示的iframe相对于其容器（主体）的高度为100％。

尝试这个：

<body>
  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <div style="width:100%; height:90%; background-color:transparent;">
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
    </iframe> 
  </div>
</body>

当然，将第二个div的高度更改为所需的高度。

达蒙 2020.03.24

尝试以下方法：

<iframe name="" src="" width="100%" style="height: 100em"/>

它对我有用

Eva斯丁 2020.03.24

这就是我所做的。我遇到了同样的问题，最终在网上搜索了几个小时的资源。

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

我将此添加到头部。

请注意，我的iframe位于具有3行1列的表格的中间单元内。

古一Gil 2020.03.24

您可以使用它来做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>

Harry古一 2020.03.24

也许已经回答了（上面的一些回答是“正确”的方法），但是我想我也应该添加解决方案。

我们的iFrame是在div中加载的，因此我需要window.height之后的其他内容。看到我们的项目已经高度依赖jQuery，我发现这是最优雅的解决方案：

$("iframe").height($("#middle").height());

当然，“＃middle”是div的ID。您唯一需要做的就是在用户调整窗口大小时调用此大小更改。

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android