发表新帖
发表新帖

IFRAME and conflicting absolute positions

后端 未结
关注
5 928
迷失自我
迷失自我 2020-12-16 11:04

I would like to have an IFRAME dynamically sized using the following CSS:

#myiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    rig
相关标签:
5条回答
  • 一个人的身影
    2020-12-16 11:41

    I would say take a look at this stack overflow question. It might help:

    Make Iframe to fit 100% of container's remaining height

    0 讨论(0)
  • 既然无缘
    2020-12-16 11:48 
    html,body {
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
}
#myiframe {
    width:100%;
    height:100%;
    border:0;
}

    work fine for me even with IE7.

    0 讨论(0)
  • 猫巷女王i
    2020-12-16 11:49

    Why don't you use height & width? You'd still get an absolute position by setting top/bottom & left/right, as in the example below.

    <!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            html, body {
                margin:0;
                padding:0;
                border:0px;
                height:100%;
                width:100%;
            }
            #container {
                position: absolute;
                top: 10px;
                bottom: 10px;
                left: 10px;
                right: 10px;
            }
            #myiframe {
                position: absolute;
                top: 0%;
                left: 0%;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

    This works for me (Tested on IE9).

    0 讨论(0)
  • 礼貌的吻别
    2020-12-16 11:49

    You can try to use this:

    document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';
    0 讨论(0)
  • 时光说笑
    2020-12-16 11:58

    Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.

    http://jsfiddle.net/sg3s/j8sbX/

    Now there are a few things you need to remember. An iframe is originally an inline-frame, so while modern browsers don't care, set display:block on it. By default it also has a border. Any stying we want to be done needs to be done on the iframe container instead or we'll break the 100% container boundry.

    And this is how we would put an element above it:

    http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, you actually need to set border=0 on the iframe for IE7)

    Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)

    Edit Some extra explanation

    We need to style the iframe container mainly because an iframe on itself doesn't let itself be sized with top/left/bottom/right. But what will work is setting its width and height to 100%. So starting from there we simply wrap the iframe in an element which we can reliably style to make less than the window 100%, the size which elements default to when none of their parents have a static height/width.

    Thinking about it we can actually drop the absolute and block. http://jsfiddle.net/sg3s/j8sbX/26/ Might want to doublecheck IE7 on that though.

    After we make the iframe 100% high and wide we cannot put any margin, padding, or border on it because that will be added to the already 100% height & width. Thus making it larger than its container, for divs that will result in an overflow:visible, simply showing everything going over the edges. But that in turn would mess up the margins, paddings and offsets we gave our elements.... In fact to make it be only the 100% height and width you have to make sure you removed the iframes default border.

    Try it out by adding a larger border (like 3px) in my example to the iframe, you should easily be able to see how it's affecting the layout.

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