Question

我有一个iframe，我想填充由bottom，right，left和top css样式指定的页面上的所有区域。但是，当我按照预期的方法工作时，它不会：

HTML：

<iframe id="example_frame" src="http://example.com"></iframe> CSS：

#example_frame {
  position: absolute;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
}

这会产生一个包含大约100x100像素的网页的小框

Answer 1

绝对定位一次使用一个x和一个y坐标。我猜测浏览器忽略了一组坐标。

此外，由于您没有为iframe指定if或者高度，因此它默认为100 x 100。

尝试类似：

#example_frame {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

Answer 2

我认为因为iframes是replaced elements，您不能只设置top，right，bottom和{{{{}}的任意组合1}}。你应该可以吗？绝对。但你不能。相反，您可以设置一个垂直属性（left或top），一个水平属性（bottom或left），然后同时设置right和{ {1}}至height。

为了达到iframe周围width空间的效果，只需将100%包裹在另一个未替换的元素中，例如1em。< / p>

iframe

产生你想要的效果的CSS是：

div

另请注意在CSS中设置<div class="abs-frame-container"> <iframe id="example_frame" src="http://example.com"></iframe> </div>并不适用于所有浏览器的问题。

Answer 3

我不确定，但您不必将iframe定义为position: absolute to be able to set a size in terms of the browser window;吗？我想它默认为display:block？

回应OP的评论。

您使用的是哪种doctype？您可以在所有可以测试的浏览器/平台上出现问题吗？你成功调用样式表了吗？您是使用内联样式，头部样式还是外部工作表？

如果你没有使用内联样式，请尝试使用它们，看看它们是否内联工作。

如何使iframe填充由边距离定义的区域？

3 个答案: