html – iFrame Height自动(CSS)

我的iframe有问题.我真的希望框架根据iframe内的内容自动调整高度.我真的想通过CSS没有javascript这样做.但是,如果我也使用javascript.

我试过身高：100％和身高：汽车等等,我只是不知道还有什么尝试！

这是我的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的网站不同.但是,我可以访问这两个网站.

谁能帮忙？

解决方法

我有同样的问题,但发现以下的工作很好：

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:

06000

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

06001

And use the following CSS:

06002

这是我找到的解决方案：

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

根据您的宽高比,您可能需要调整填充底部：56.25％;获得高度正确.

原文链接：https://www.f2er.com/html/231313.html

html – iFrame Height自动(CSS)

解决方法

猜你在找的HTML相关文章