当前位置： 文江博客话题详情

IFRAME 和冲突的绝对位置

发布于 2024-09-28 11:13:59 字数 856 浏览 4 评论 0原文

我想使用以下 CSS 动态调整 IFRAME 的大小：

#myiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

但是，似乎没有浏览器支持此操作。

在好的浏览器中，我可以使用引用的 CSS 样式将 IFRAME 包装在 DIV 中，并设置高度和高度。 IFRAME 的宽度为 100%。但这在IE7中不起作用。没有使用CSS表达式，有人设法解决这个问题吗？

更新

MatTheCat 回答了一个场景，如果 IFRAME 位于 body 正下方并且 body/html 标签设置了 height: 100%，则该场景有效。在我最初的问题中，我没有说明 IFRAME 的位置以及其容器应用的样式。希望下面的内容能够解决这个问题：

<html>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

让我们假设以下容器 CSS：

#container {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

如果您现在将 height: 100% 放在 IFRAME 上，它将无法正确调整大小。

原文

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

#myiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

However, no browser seems to support this.

In good browsers I could wrap the IFRAME in a DIV with the quoted CSS style and set the height & width of the IFRAME to 100%. But this does not work in IE7. Short of using CSS expressions, has anyone managed to solve this?

Update

MatTheCat answered with a scenario that works if the IFRAME is located directly under the body and the body/html tags have height: 100% set. In my original question I did not state where the IFRAME was and what styling applied to it's container. Hopefully the following addresses this:

<html>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

and let's assume the following container CSS:

#container {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

if you now place height: 100% on the IFRAME it will not size correctly.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

半寸时光 2024-10-05 11:13:59

使用 div 作为所有边的填充。使用 100% 的父 div 将 iframe 放置在其中。

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

现在您需要记住一些事情。 iframe 最初是一个内联框架，因此虽然现代浏览器不在乎，但可以在其上设置 display:block 。默认情况下它也有一个边框。我们想要完成的任何设置都需要在 iframe 容器上完成，否则我们将打破 100% 容器边界。

这就是我们在其上方放置元素的方式：

http://jsfiddle.net/sg3s/j8sbX/ 25/ （编辑：我的错，你实际上需要在 IE7 的 iframe 上设置 border=0）

在 IE7+ 中应该可以正常工作（IE6 不喜欢绝对定位 + 使用上/右/下/左来给出它布局）

编辑一些额外的解释

我们需要设置 iframe 容器的样式，主要是因为 iframe 本身不允许使用上/左/下/右调整自身大小。但有效的方法是将其宽度和高度设置为 100%。因此，从这里开始，我们只需将 iframe 包装在一个元素中，我们可以可靠地设置该元素的样式，使其小于窗口 100%，即当其父元素都没有静态高度/宽度时元素默认的大小。

想想看，我们实际上可以放弃绝对值并阻止。 http://jsfiddle.net/sg3s/j8sbX/26/ 可能需要仔细检查 IE7不过。

在我们将 iframe 设置为 100% 高和宽后，我们不能在其上放置任何边距、填充或边框，因为它们将添加到已经 100% 的高度和宽度上。宽度。因此，使其比其容器更大，对于 div 来说，这将导致溢出：可见，仅显示超出边缘的所有内容。但这反过来又会弄乱我们为元素提供的边距、填充和偏移量……事实上，要使其只有 100% 的高度和宽度，您必须确保删除了 iframes 默认边框。

通过在我的示例中向 iframe 添加更大的边框（例如 3px）来尝试一下，您应该能够轻松地看到它如何影响布局。

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.

回复 原文
女中豪杰 2024-10-05 11:13:59

你为什么不使用高度&宽度？您仍然可以通过设置顶部/底部和顶部/底部来获得绝对位置。左/右，如下例所示。

<!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>

这对我有用（在 IE9 上测试）。

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).

回复 原文
亣腦蒛氧 2024-10-05 11:13:59
html,body {
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
}
#myiframe {
    width:100%;
    height:100%;
    border:0;
}

即使使用 IE7 也能正常工作。

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.

回复 原文
隔纱相望 2024-10-05 11:13:59

我想说看看这个堆栈溢出问题。它可能会有所帮助：

使 Iframe 适合容器剩余高度的 100%

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

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

回复 原文
我们的影子 2024-10-05 11:13:59

你可以尝试使用这个：

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';

You can try to use this:

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';
回复 原文
~没有更多了~

关于作者

独闯女儿国

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文