zoukankan      html  css  js  c++  java
  • iframe高度自适应 完美解决

    前言

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

    css

    iframe {
        display: block;
        border: none;
        height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/
         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;/*设置高度百分比,一直调到只有一个滚动调为止*/
                 100%;
            }
        </style>
    </head>
    <body>
        <iframe id = "iframe" src="./line.html"></iframe>
    </body>
    </html>
    

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

  • 相关阅读:
    Codeforces Round #239(Div. 2) 做后扯淡玩
    hdu 3507 Print Article
    prufer序列
    POJ 2778 DNA Sequence
    Codeforces Round #237 (Div. 2)
    poj3352
    图论知识
    POJ 2186
    Codeforces Round #236 (Div. 2)
    POJ 2823 Sliding Window
  • 原文地址:https://www.cnblogs.com/niuben/p/14672113.html
Copyright © 2011-2022 走看看