iframe中的元素高度：100％拉伸 [英] Element in iframe with height: 100% strech
问题描述
我正在解决这个问题：
我有iframe，我正在展示网站，它有一些html结构。在这个结构里面是元素，它有css属性：height：100％;
问题是，该元素延伸到iframe的全高，无论如何我不应该这么想。你能给我一些想法，如何解决这个问题？
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%; Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
以下是iframe内容的源代码：
Here is source code for iframe content:
<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：
Here is source code, where I put an 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>
非常感谢你的帮助。
推荐答案
在子页面（iframe中的页面）将从左上角开始显示，因此通常不需要定位子页面。父页面上iframe维度的样式确定将看到多少子页面。最简单有效的方法是使iframe响应（能够适应屏幕大小和/或窗口的变化）
On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!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％拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
