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  牛奔  阅读(1971)  评论(0)  编辑  收藏  举报