Question

我一直在寻找一点，我在这个主题上找到的所有内容都是在破碎的iframe之后显示的文字，但是我想要做的是实际显示一个文本低于设置在90％高度的iframe，就像这样：

我想在白色区域显示一些文字，这是浏览器如何显示我的iframe代码的屏幕截图：

<html>
<head>
<title></title>
</head>
<iframe src="https://link.com/" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:90%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
</html>

我在iframe结束标记之后播放了一些文字并且文字无法显示，我猜测我要做的是将iframe放在div中，另一个div吼叫，但我该怎么做？

我几天前才开始学习。

Answer 1

只需从框架样式中删除position:fixed; top:0px; left:0px; bottom:0px; right:0px;即可。这使它脱离正常流量并使其出现在与其后面的内容相同的位置。

Answer 2

将<iframe>放入<figure>编辑position的元素（我使用relative）中。
position: absolute代表<iframe>以及<figure>内的任何其他元素（我逻辑上选择了<figcaption>）。
默认情况下，<iframe> display: inline会将其更改为display: block;，并为其指定相对高度（我将其height: 70% wand width: 100%）。
给<figure>一个明确的高度，使<iframe>和<figcaption>空间足够垂直（我给<figure> height: 70vh;}。
<figcaption>也是width: 100%，并将剩余的垂直空间设为height: 30%。

<强>段

＆＃13;

figure {
  position: relative;
  width: 90vw;
  height: 70vh;
  margin: 30px auto;
  border: 1px solid red;
  text-align: center;
}
iframe {
  position: absolute;
  top: 0;
  overflow: auto;
  display: block;
  height: 90%;
  width: 100%;
}
figcaption {
  position: absolute;
  bottom: 0;
  height: 10%;
  width: 100%;
  border: 1px solid blue;
}

＆＃13;

<!doctype html>
<html>

<head>
  <title></title>
</head>

<body>
  <figure>
    <iframe src="http://www.example.com"></iframe>
    <figcaption>This is an iframe to www.example.com</figcaption>
  </figure>
</body>

</html>

＆＃13;

iframe之后的文字？

2 个答案: