使用iframe时，如何始终保持最大高度Angular 4

Question

首先，使用Angular4，bootstrap3，html5.

现在，我有一个 iframe <iframe src="http://test.test"></iframe>，样式为

body {
    margin: 0;
}
iframe {
    display: block;
    border: none;
    height: 100vh;
    width: 100%;
}

弹出html时，高度是正确的（而且我没有滚动条），但是当iframe页面内容发生变化时，出现滚动条。我的 objective 是在 iframe 中没有滚动条，永远不会。

EDIT1：已尝试 overflow: hidden;，但没有用。

EDIT2：我不希望内容溢出到父页面。

Answer 1

尝试将 overflow: hidden 添加到您的样式中。

Answer 2

我有一个类似的问题，我添加了一个 js 脚本来获取完整的 innerHeight，试试这个，你也可以在 window 上实现它（你可以使用 id，但我总是显示 class 示例，因为它可以多次使用）：

<script>
    window.onresize = function() {
        var frame = document.getElementByClassName('myFrameClass')[0];
        frame.style.height = window.innerHeight;
    }
</script>

EDIT : 必须在 iframe 标签上有 scrolling="no" 和 overflow: hidden css 内部内容规则

使用iframe时，如何始终保持最大高度Angular 4

When using iframe, how to maintain always a maximum height Angular 4

html

css

iframe

scroll

overflow