iframe高度自适应完美解决调整高度即可

最新推荐文章于 2025-05-18 13:16:54 发布

原创最新推荐文章于 2025-05-18 13:16:54 发布 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

一直被iframe的高度自适应的问题困扰着，今天终于找到完美解决方案，加上以下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>