iFrame自动高度(CSS)
我的iframe有问题。我真的希望框架能够根据iframe中的内容自动调整高度。我真的很想在没有javascript的情况下通过CSS来做到这一点。但是，如果我也有，我会使用javascript。
我已经尝试过height: 100%;和height: auto;等，我只是不知道还能尝试什么！
这是我的CSS。对于框架..。
#frame {
position: relative;
overflow: hidden;
width: 860px;
height: 100%;
}然后是框架的页面。
#wrap {
float: left;
position: absolute;
overflow: hidden;
width: 780px;
height: 100%;
text-align: justify;
font-size: 16px;
color: #6BA070;
letter-spacing: 3px;
}页面的代码看起来像这样...
<!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>请注意，iframe中的URL与将显示iframe的网站不同。但是，我可以访问这两个网站。
有人能帮上忙吗？
回答 5
Stack Overflow用户
发布于 2017-01-06 01:51:48
我也遇到过同样的问题，但我发现下面的方法非常有效：
创建响应式YouTube嵌入的关键是填充和容器元素，这允许您为其提供固定的纵横比。您还可以将此技术用于大多数其他基于iframe的嵌入，例如幻灯片。
下面是一个典型的YouTube嵌入代码，宽度和高度都是固定的：
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>如果我们能给它一个100%的宽度会很好，但它不会工作，因为高度保持不变。您需要做的是将其包装在容器中，如下所示(注意类名以及删除了宽度和高度)：
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>并使用以下CSS：
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}这是我找到解决方案的页面：
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
根据您的纵横比，您可能需要调整padding-bottom: 56.25%;以获得正确的高度。
Stack Overflow用户
发布于 2018-06-22 15:16:29
这是我的纯CSS解决方案:)
添加，滚动yes到你的iframe。
<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>诀窍:)
<style>
html, body, iframe { height: 100%; }
html { overflow: hidden; }
</style>您不需要担心响应速度:)
Stack Overflow用户
发布于 2016-12-14 19:32:46
@SweetSpice，使用位置作为绝对而不是相对。看起来不错
#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}https://stackoverflow.com/questions/24157940
复制相似问题