iFrame 高度自动 (CSS) [英] iFrame Height Auto (CSS)

查看：22
本文介绍了iFrame 高度自动 (CSS)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 iframe 有问题.我真的希望框架根据 iframe 中的内容自动调整高度.我真的很想通过没有 javascript 的 CSS 来做到这一点.但是，如果我也有的话，我会使用 javascript.

我试过height: 100%; 和height: auto; 等等.我只是不知道还能尝试什么！

这是我的 CSS.对于框架...

#frame {位置:相对；溢出:隐藏；宽度:860px；高度:100%；}

然后是框架的页面.

#wrap {向左飘浮;位置:绝对；溢出:隐藏；宽度:780px；高度:100%；文本对齐:对齐；字体大小:16px；颜色:#6BA070；字母间距: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" ><头><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>...</title><link rel="stylesheet" href="style.css" type="text/css"/><身体><div id="容器"><div id="标题">

<div id="导航"><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个理由</a><a href="letter.php" class="navigation">letter</a>

<div id="内容" ><h1>更新信息</h1><iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>

<div id="页脚">

请注意，iframe 中的 URL 与将显示 iframe 的网站不同.但是，我可以访问这两个网站.

有人可以帮忙吗?

解决方案

我遇到了同样的问题，但发现以下方法效果很好:

创建响应式 YouTube 嵌入的关键是使用填充和容器元素，它允许您为其提供固定的纵横比.您还可以将此技术用于大多数其他基于 iframe 的嵌入，例如幻灯片.

这是典型的 YouTube 嵌入代码的样子，具有固定的宽度和高度:

 <iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"frameborder="0" allowfullscreen></iframe>

如果我们可以给它一个 100% 的宽度会很好，但它不会工作，因为高度保持固定.你需要做的是像这样将它包裹在一个容器中(注意类名和去除宽度和高度):

 
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"frameborder="0" allowfullscreen class="video"></iframe>

并使用以下 CSS:

 .container {位置:相对；宽度:100%；高度:0；填充底部:56.25%；}.视频 {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}

这是我找到解决方案的页面:

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

根据您的纵横比，您可能需要调整 padding-bottom: 56.25%; 以获得正确的高度.

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.

I've tried height: 100%; and height: auto;, etc. I just don't know what else to try!

Here is my CSS. For the frame...

#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.

Can anyone help?

解决方案

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.

Here is what a typical YouTube embed code looks like, with fixed width and height:

 <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):

 <div class="container">
 <iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen class="video"></iframe>
 </div>

And use the following 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

Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%; to get the height right.

这篇关于iFrame 高度自动 (CSS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆