Question

我们有一个在iframe中显示的Qucksight仪表板

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="3200px" overflow="auto" width="100%" frameborder="0"></iframe>

iframe正确显示，并且仪表板也出现。现在，仪表板本身具有多个选项卡，而每个选项卡包含具有不同长度的不同内容。

如上所示，手动将高度设置为固定的3200像素，这将导致内容较少的标签页有很多空白

现在我已经尝试将高度设置为100%和auto

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="100%" overflow="auto" width="100%" frameborder="0"></iframe>

都给出了以下结果

我该怎么办才能在切换选项卡时动态调整仪表盘的全高？

更新

将iframe包装在

中

<div height="100%" width="100%"><iframe...></iframe></div>

得出以下结果

更新2

如下所示在样式中添加高度即可解决问题

<iframe src="..." style="height: 100vh; width: 100%; scrolling: no; frameborder: 0"></iframe>'

但它会创建一个双滚动条（一个用于实际的iframe，一个用于页面）

Answer 1

您可以使用Amazon QuickSight JavaScript SDK生成以下iframe：

然后将height参数设置为AutoFit以根据实际仪表板内容的高度自动缩放。

示例：

height: "AutoFit",
loadingHeight: '700px',

Answer 2

从页面正文中消除溢出将禁用滚动。如果您的iframe似乎占据了整个屏幕，则只需添加“ overflow：hidden;”即可。在页面的正文中。

body {
    overflow: hidden;
}

检查是否正在应用该属性，因为如果使用任何引导程序模板，它可能会覆盖溢出：隐藏。在这种情况下，只需在CSS中添加“！important”即可。

祝你好运！

Answer 3

您可以尝试将iframe包裹在Div中，并将高度和宽度100％应用于iframe。

Answer 4

将iframe内部的div设置为高度为100％即可。我以前尝试过。

<div height="100%>
<iframe>...</iframe>
</div>

谢谢。

Answer 5

我尝试了以下方法，并且有效！

HTML

<iframe src="..."></iframe>

...需要替换为网址

CSS

iframe {
    width: 100%;
    height: 100vh;
}

在CSS中，height中的iframe被设置为视口高度的100％。（又称：窗口的高度）

注意：

希望这能解决您的问题。

谢谢

Answer 6

我认为它将为您提供帮助

<body style="margin: 0;overflow: hidden;height: 100vh;">
      <iframe src="..." style="height: 100%;width: 100%;border: 0;"></iframe>
</body>