iframe高度自适应完美解决

前言

一直被iframe的高度自适应的问题困扰着，今天终于找到完美解决方案，加上以下css即可。

css

复制代码

iframe {
    display: block;
    border: none;
    height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/
    width: 100%;
}

示例代码

复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        iframe {
            display: block;
            border: none;
            height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/
            width: 100%;
        }
    </style>
</head>
<body>
    <iframe id = "iframe" src="./line.html"></iframe>
</body>
</html>

外层网页的高度固定为浏览器窗口高度，这样一来滚动条就只有一个，即iframe嵌套的内层网页的滚动条。

posted @ 2021-04-17 21:06 牛奔阅读(1997) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

历史上的今天：
2019-04-17 Windows下Redis的安装和部署

牛奔

每个优秀的人,都有一段沉默的时光,那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。

iframe高度自适应完美解决

前言

css

示例代码

导航目录

牛奔

每个优秀的人,都有一段沉默的时光,那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。

iframe高度自适应 完美解决

前言

css

示例代码

导航目录

iframe高度自适应完美解决