h5- iframe完美嵌套的使用

最新推荐文章于 2024-07-05 14:41:46 发布

原创最新推荐文章于 2024-07-05 14:41:46 发布 · 1.4w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#h5 iframe嵌套 #在页面中使用iframe #iframe的嵌套 #iframe完美嵌套 #iframe嵌套使用csdn

vue H5页面编写专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的Iframe嵌套方法，通过绝对定位将顶部导航栏与Iframe内容进行整合。文章包含完整的示例代码。

没啥可讲的直接上代码吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>iframe嵌套</title>
</head>
<style>
body{
padding: 0; margin: 0;
}
.top{
width:100%;height:64px;
background:#000;
position:absolute;
z-index:999;
}

.iframeCss{
position:relative;
width:100%;
height:3000px;
top:-60px;
z-index: 0;
overflow: visible;
}
</style>
<body>
<div class="top" >

</div>

<iframe class="iframeCss"
ref="iframe"
src="http://www.**********.com"
width="100%"
height="3000"
scrolling="no"
frameBorder="0"
title="title">
</iframe>
</body>

</html>

这里的iframe主要通过绝对定位实现的，意思就是 position:relative; top:-60px; 哈哈搞笑吧~.