Swe*_*ice 29 html css iframe height
我的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中的网址与iframe将在其上显示的网站不同.但是,我可以访问这两个网站.
有人可以帮忙吗？
小智 27
我有同样的问题,但发现以下效果很好:
创建响应式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%;以获得正确的高度.
Ben*_*joe 10
这是我的纯 CSS 解决方案 :)
添加，滚动到您的 iframe。
<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>
诀窍:)
<style>
html, body, iframe { height: 100%; }
html { overflow: hidden; }
</style>
您无需担心响应速度:)