几乎所有东西都试过了-iFrame总是150px

Question

我已经和iFrame高度斗争了几个小时，只是头疼得厉害。在我的网站上有三个不同的iFrame。当你点击按钮时，它们会弹出。一次可以显示一个iFrame。

我一直在尝试我在互联网上发现的不同的JS脚本和CSS技巧，但都不起作用。

HTML

<div id="frontpage-7-div" class="d-flex align-items-center justify-content-center row"> 

<div class="btn-group btn-group-toggle" style="padding: 20px; height: 100px;" data-toggle="buttons">
<label class="btn btn-secondary active" onclick="Leppavaara()">
<input type="radio" autocomplete="off"> Espoo
</label>
<label class="btn btn-secondary" onclick="Tivolitie()">
<input type="radio" autocomplete="off"> Alppila
</label>
<label class="btn btn-secondary" onclick="Helsinki()">
<input type="radio" autocomplete="off"> Lauttasaari
</label>
</div>


<div id="leppavaara" class="kalenteri">
<iframe width="100%" frameborder="0" scrolling="no" src="https://varaa.timma.fi/reservation/susannasnailsalonleppavaara" id="reservationIframe"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.8.3/iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize({checkOrigin: false}, '#reservationIframe8112');</script>
</div>

<div id="helsinki" class="kalenteri">
<iframe width="100%" frameborder="0" scrolling="no" src="https://varaa.timma.fi/reservation/susannasnailssalonlauttasaari" id="reservationIframe"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.8.3/iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize({checkOrigin: false}, '#reservationIframe8112');</script>
</div>

<div id="tivolitie" class="kalenteri">
<iframe width="100%" frameborder="0" scrolling="no" src="https://varaa.timma.fi/reservation/susannasnailsalonhelsinki" id="reservationIframe"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.8.3/iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize({checkOrigin: false}, '#reservationIframe8112');</script>
</div>

</div>

CSS

#leppavaara {
display: inline;
}
#helsinki {
display: none;
}
#tivolitie {
display: none;
}
.kalenteri {
width: 100%;
height: auto;
}

尝试了以下示例：

https://css-tricks.com/snippets/jquery/fit-iframe-to-content/

HTML5iFrame高度只有150px

我被困在150px，我可以手动设置高度，例如700px，但那些iframe的高度不同。移动设备的高度也会发生变化。所以这就是为什么我想使用它自己的高度。

问题是：如何设置与iframe内容相同的高度？

Answer 1

首先，不同的iframe不能都有相同的ID。即使有些被隐藏，它们也必须有不同的ID。