0

我想绝对定位一个 iframe 并定义它的左、上、右、下偏移：

#x {
    position: fixed;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    border: 2px solid #aaa;
    z-index: 100002;
    background: #abc;
    display:none
}​

我发现左侧和顶部值受到尊重，而右侧和底部值被忽略。当我没有设置左侧和顶部值时，正确处理右侧和底部值。检查这个小提琴：http: //jsfiddle.net/7fTEF/

任何想法？

注意我不想设置元素的宽度和高度，因为我希望它相对于视口，我也不想将宽度和高度设置为百分比，我只想保持边框偏移为固定值，在这里说“10px”。

4

4 回答 4

2

不知道为什么，但是，在玩了一会儿之后，IFrame 似乎出于某种原因不喜欢这种定位方式。

我可以提出的一种解决方案是将它包含在一个 div 中，并将 div 设置为您想要的大小/位置。

http://jsfiddle.net/7fTEF/1/

此外，尽管为 500x500px，主体背景颜色将继续填满页面中的所有空间，但 div 的大小仍然正确。（调整身体大小以检查它......）

于 2012-08-19T23:21:31.293 回答
1

您可以通过 javascript 找到容器大小，然后设置 iframe 大小。

于 2012-08-19T23:20:28.623 回答
1

您不能同时设置 left 和 right 或 top 和 bottom 属性。 编辑：事实证明，您实际上可以定位绝对，正如我刚刚从这篇文章中了解到的那样：http ://www.alistapart.com/articles/conflictingabsolutepositions （所有提示都归功于@thirdender！）。不过，iframe 的行为似乎有所不同。

你可以像这样实现你所追求的：http: //jsfiddle.net/7fTEF/2/

请注意，不需要绝对定位。我还使用了 css3 属性 box-sizing。您将必须添加浏览器特定的前缀，如此处所述http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

请注意，此解决方案不适用于旧浏览器，您最终会看到滚动条。如果你想让它完全兼容浏览器，我认为你将不得不求助于一些 js，但是你会遇到禁用此功能的人的问题。你也可以尝试两者的结合。这完全取决于您的观众以及您如何找到它......

于 2012-08-19T23:22:50.443 回答
0

我在这里找到了这个页面http://www.alistapart.com/articles/conflictingabsolutepositions/解释了一些解决方案，这些解决方案也与仅使用 CSS 的旧 IE 浏览器兼容。否则可能需要一些 JavaScript 计算。

于 2012-08-19T23:50:54.033 回答