Html iFrame 高度自动 (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24157940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iFrame Height Auto (CSS)
提问by SweetSpice
I am having problems with my iframe. I really want the frame to auto adjust heights according to the content within the iframe. I really want to do this via the CSS without javascript. However, I will use javascript if I have too.
我的 iframe 有问题。我真的希望框架根据 iframe 中的内容自动调整高度。我真的很想通过没有 javascript 的 CSS 来做到这一点。但是，如果我也有的话，我会使用 javascript。
I've tried height: 100%;and height: auto;, etc. I just don't know what else to try!
我试过height: 100%;和height: auto;等。我只是不知道还能尝试什么！
Here is my CSS. For the frame...
这是我的 CSS。对于框架...
#frame {
position: relative;
overflow: hidden;
width: 860px;
height: 100%;
}
And then for the frame's page.
然后是框架的页面。
#wrap {
float: left;
position: absolute;
overflow: hidden;
width: 780px;
height: 100%;
text-align: justify;
font-size: 16px;
color: #6BA070;
letter-spacing: 3px;
}
The page's coding looks like this...
页面的编码看起来像这样......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ?? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<a href="/" class="navigation">home</a>
<a href="about.php" class="navigation">about</a>
<a href="fanlisting.php" class="navigation">fanlisting</a>
<a href="reasons.php" class="navigation">100 reasons</a>
<a href="letter.php" class="navigation">letter</a>
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Please note that the URL within the iframe is different then the website the iframe will be displayed on. However, I have access to both websites.
请注意，iframe 中的 URL 与将显示 iframe 的网站不同。但是，我可以访问这两个网站。
Can anyone help?
任何人都可以帮忙吗？
回答by Ryan
I had this same issue but found the following that works great:
我有同样的问题，但发现以下效果很好：
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
创建响应式 YouTube 嵌入的关键是使用填充和容器元素，它允许您为其提供固定的纵横比。您还可以将此技术用于大多数其他基于 iframe 的嵌入，例如幻灯片。
Here is what a typical YouTube embed code looks like, with fixed width and height:
这是典型的 YouTube 嵌入代码的样子，具有固定的宽度和高度：
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
如果我们可以给它一个 100% 的宽度会很好，但它不会工作，因为高度保持固定。您需要做的是将它包装在一个容器中，如下所示（注意类名和去除宽度和高度）：
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
And use the following CSS:
并使用以下 CSS：
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here is the page I found the solution on:
这是我找到解决方案的页面：
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%;to get the height right.
根据您的纵横比，您可能需要调整padding-bottom: 56.25%;以获得正确的高度。
回答by Benjoe
This is my PURE CSS solution :)
这是我的纯 CSS 解决方案 :)
Add, scrolling yes to your iframe.
添加，滚动到您的 iframe。
<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>
The trick :)
诀窍:)
<style>
html, body, iframe { height: 100%; }
html { overflow: hidden; }
</style>
You don't need to worry about responsiveness :)
您无需担心响应速度:)
回答by Casper Spruit
Add this to your section:
<script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } </script>And change your iframe to this:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
将此添加到您的部分：
<script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } </script>并将您的 iframe 更改为：
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
It is posted Here
它张贴在这里
It does however use javascript, but it is simple and easy to use code that will fix your problem.
然而，它确实使用了 javascript，但它是简单易用的代码，可以解决您的问题。
回答by Paritosh
@SweetSpice, use position as absolute in place of relative. It will work
@SweetSpice，使用绝对位置代替相对位置。它会工作
#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}
回答by Immran Mohammed
<div id="content" >
<h1>Update Information</h1>
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
#support-box {
width: 50%;
float: left;
display: block;
height: 20rem; /* is support box height you can change as per your requirement*/
background-color:#000;
}
#wrapper {
width: 90%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
background:#ddd;
margin:auto;
height:100px; /* here the height values are automatic you can leave this if you can*/
}
#wrapper iframe {
width: 100%;
display: block;
padding:10px;
margin:auto;
}
回答by Peter Soxx
You have to use absoluteposition along with your desired height.
in your CSS, do the following:
您必须使用absolute位置以及所需的高度。在您的 CSS 中，执行以下操作：
#id-of-iFrame {
position: absolute;
height: 100%;
}
回答by Mohammad Amin
You should note that divtag behaves like nothing and just let you to put something in it. It means that if you insert a paragraph with 100 lines of text within a divtag, it shows all the text but its height won't change to contain all the text.
你应该注意到div标签的行为就像什么都没有，只是让你在里面放一些东西。这意味着如果您在div标签中插入一个包含 100 行文本的段落，它会显示所有文本，但其高度不会更改以包含所有文本。
So you have to use a CSS & HTML trick to handle this issue. This trick is very simple. you must use an empty div tagwith class="clear"and then you will have to add this class to your CSS. Also note that your have #wrapin your CSS file but you don't have any tag with this id. In summary you have to change you code to something like below:
所以你必须使用 CSS & HTML 技巧来处理这个问题。这个技巧非常简单。您必须使用class="clear"的空 div 标签，然后您必须将此类添加到您的 CSS。另请注意，您的 CSS 文件中有#wrap，但您没有任何带有此 ID 的标签。总之，您必须将代码更改为如下所示：
HTML Code:
HTML代码：
<!-- Change "id" from "container" to "wrap" -->
<div id="wrap">
<div id="header">
</div>
<div id="navigation">
<a href="/" class="navigation">home</a>
<a href="about.php" class="navigation">about</a>
<a href="fanlisting.php" class="navigation">fanlisting</a>
<a href="reasons.php" class="navigation">100 reasons</a>
<a href="letter.php" class="navigation">letter</a>
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
<!-- Add this line -->
<div class="clear"></div>
</div>
<div id="footer">
</div>
<!-- Add this line -->
<div class="clear"></div>
</div>
And also add this line to your CSS file:
并将这一行添加到您的 CSS 文件中：
.clear{ display: block; clear: both;}
