We have a Qucksight dashboard that is being displayed within an iframe

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

```

the iframe gets displayed correctly and also the dashboard appears. Now the dashboard itself has multiple tabs, whereas each tab contains different content with different length. 

As seen above the height is set manually to a fixed 3200px which will result in lots of empty space for tabs with less content

[![enter image description here](https://i.stack.imgur.com/XQevy.png)](https://i.stack.imgur.com/XQevy.png)

Now I've tried to set the height to `100%` and `auto`

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

```

which both gave the following result

[![enter image description here](https://i.stack.imgur.com/Wzg3f.png)](https://i.stack.imgur.com/Wzg3f.png)

What do I have to do to get the dashboards showing in full height which is dynamically adjusted when switching tabs?

UPDATE

Wrapping the iframe in a 

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

```

results in the following

[![enter image description here](https://i.stack.imgur.com/CLLDC.png)](https://i.stack.imgur.com/CLLDC.png)

UPDATE 2

Adding the height in the style as follows solves the issue

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

```

but it creates a double scroll bar (one for the actual iframe and one for the page)

[![enter image description here](https://i.stack.imgur.com/cblmn.png)](https://i.stack.imgur.com/cblmn.png)