发表新帖
发表新帖

Full-screen iframe with a height of 100%

前端 未结
关注
17 1149
星月不相逢
星月不相逢 2020-11-22 04:35

Is iframe height=100% supported in all browsers?

I am using doctype as:
相关标签:
17条回答
  • 南旧
    2020-11-22 05:04

    3 approaches for creating a fullscreen iframe:

    • Approach 1 - Viewport-percentage lengths

      In supported browsers, you can use viewport-percentage lengths such as height: 100vh.

      Where 100vh represents the height of the viewport, and likewise 100vw represents the width.

      Example Here

      body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
      <iframe></iframe>

    • Approach 2 - Fixed positioning

      This approach is fairly straight-forward. Just set the positioning of the fixed element and add a height/width of 100%.

      Example Here

      iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
      <iframe></iframe>

    • Approach 3

      For this last method, just set the height of the body/html/iframe elements to 100%.

      Example Here

      html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
      <iframe></iframe>

    0 讨论(0)
  • Happy的楠姐
    2020-11-22 05:05

    1. Change your DOCTYPE to something less strict. Don't use XHTML; it's silly. Just use the HTML 5 doctype and you're good:

    <!doctype html>

    2. You might need to make sure (depends on the browser) that the iframe's parent has a height. And its parent. And its parent. Etc:

    html, body { height: 100%; }
    0 讨论(0)
  • 一整个雨季
    2020-11-22 05:07

    You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:

    <body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

    An alternative:

    <body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

    To hide scrolling with 2 alternatives as shown above:

    <body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

    Hack with the second example:

    <body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

    To hide the scroll-bars of the iFrame, the parent is made overflow: hidden to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!

    0 讨论(0)
  • 北荒
    2020-11-22 05:09

    Here is a concise code. It does relies on a jquery method to find the current window height. On load of iFrame it sets the height of the iframe be the same as the current window. Then to handle resizing of the page, the body tag has an onresize event handler which sets the iframe's height whenever the document is resized.

    <html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

    here's a working sample: http://jsbin.com/soqeq/1/

    0 讨论(0)
  • 遥遥无期
    2020-11-22 05:10

    <iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

    0 讨论(0)
  • 醉梦人生
    2020-11-22 05:11

    I ran into the same problem, I was pulling an iframe into a div. Try this:

    <iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

    The height is set to 100vh which stands for viewport height. Also, the width could be set to 100vw, although you'll likely run into problems if the source file is responsive (your frame will become very wide).

    0 讨论(0)
 看不清?
提交回复
热议问题