|
通过对<div>标签高度控制来隐藏第三方页面底部内容,设置<iframe>标签中的margin-top上部边距来隐藏页面的头部导航栏信息等。
代码实现(以百度首页展示为例):
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <style>
- html,body {
- height: 100%;
- overflow: hidden;
- }
-
- * {
- margin: 0;
- padding: 0;
- }
- .container {
- width: 100%;
- height: calc( 100% + 600px );
- height: -webkit-calc(100% + 600px);
- overflow: hidden;
- margin: 0;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <iframe id='iframeid'
- src='https://www.baidu.com'
- style="margin-top: -210px; width: 100%; display: block;"
- frameborder="0" marginheight="0" marginwidth="0" border="0"
- hspace="0" vspace="0" scrolling="yes" height="100%" width="100%"></iframe>
- </div>
- </body>
- </html>
复制代码 参数说明
margin-top: -210px:通过调整<iframe>标签中margin-top值的大小来控制网页头部需要展示的位置。
height: calc( 100% + 600px ); 通过调整<div>容器中height属性calc( )函数 "+"后的值大小来控制网页底部要隐藏的位置。
注意:
(1).在浏览器缩放时,网页底部隐藏的部分可能会显示,在使用时需根据具体业务场景进行px值大小调整。
(2).确保浏览器对 calc()函数的支持,本次案例可以满足对火狐浏览器以及谷歌浏览器的适配。
效果展示
|
|