Question

这是整个文件。我认为这可能是一个重置问题所以我将身高和iframe的身高设置为100％。在此处查看 - www.arcmarks.com/video。请不要重新发布。

我希望它占据整个页面。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>

    <style>
        .if {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
        }
    </style>

    <iframe class="if" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"
            frameborder="0" src="//fiddle.jshell.net/kizu/zfUyN/show/"></iframe>

</body>
</html>

Answer 1

body和html仅限全宽。它是由jsfiddle.net，您的视图限制为148px的高度。请查看以下内容：

<强>解决方案

由于您无法控制jsfiddle.net，因此html, body {height: 100%;}也可能有效。请尝试使用API检查以获得全宽。可以选择共享全屏嵌入。请试试。

Answer 2

您需要在CSS中添加html { height: 100%; }。

DEMO

以下是解释：

Working with the CSS height property and percentage values

Answer 3

请参阅此fiddle

要使iframe取100%个高度，您需要将html的高度与body一起设置为100%。

因此更新后的CSS将如下所示

<强> CSS

html,body {
        width: 100%;
        height: 100%;
    }

作为备注，您必须提及<style>标记内的<head>，而不是<body>标记内的内容。

Answer 4

在iframe的css中使用position:absolute。

.if {
  position:absolute;
  height:100%
  width:100%
}

为什么这个iframe高度难以达到150像素？

4 个答案:

请参阅此fiddle