Question

我正在与这个问题作斗争：

我有iframe，我在其中显示网站，其中有一些html结构。在这个结构里面是元素，它有css属性：height：100％; 问题是，这个元素延伸到iframe的全高，无论如何它不应该是我想的。你能给我一些想法，如何解决这个问题？

以下是iframe内容的源代码：

<html>
    <head>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
        <link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
        <link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
        <link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
    </head>
    <body>
        <div id="overview">
            <div class="overview slider swiper-container swiper-container-horizontal">
                <div class="swiper-wrapper">
                    XXX
                </div>
            </div>
        </div>

        <div id="benefits">
            <div class="grid">
                <article id="article1" class="clearfix">
                    <div class="text col right">
                        <h2>People behavior in one picture</h2>
                    </div>
                </article>
            </div>
        </div>
    </body>
</html>

这是源代码，我放了一个iframe：

<!DOCTYPE html>
<html lang="cs" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>Titulek stránky</title>
  </head>
  <body>
    <iframe src="iframe.html" width="1600" height="4000"></iframe>
  </body>
</html>

非常感谢你的帮助。

Answer 1

在子页面（iframe中的页面）将从左上角开始显示，因此通常不需要定位子页面。父页面上iframe维度的样式确定将看到多少子页面。最简单有效的方法是使iframe响应（能够适应屏幕大小和/或窗口的变化）

<!DOCTYPE html>
<html lang="cs" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>Titulek stránky</title>
  </head>
  <body>
    <iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
  </body>
</html>

iframe中的元素高度：100％拉伸

1 个答案: