gpt4 book ai didi

html - iframe 中高度为 : 100% strech 的元素

转载 作者:行者123 更新时间:2023-11-28 07:19:42 25 4
gpt4 key购买 nike

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

我有 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>

非常感谢您的帮助。

最佳答案

子页面(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>

关于html - iframe 中高度为 : 100% strech 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32154459/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com