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

【问题标题】：Tried almost everything - iFrame always 150px几乎所有东西都试过了 - iFrame 总是 150px
【发布时间】：2021-04-06 05:41:14
【问题描述】：

我已经与 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/

HTML5 iFrame is only 150px in height

我被困在 150 像素，我可以手动设置高度，例如 700 像素，但这些 iframe 的高度不同。而且手机的高度也会变化。所以这就是为什么我想使用它自己的高度。

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

【问题讨论】：

首先，你不同的 iframe 不能都有相同的 ID。即使有些是隐藏的，它们仍然必须具有不同的 ID。我不知道这是否真的能解决问题。
另外，我没有时间深入研究这个问题，但是您是否尝试过将#leppavaara 设置为“display: inline-block; width: 500px;”？
为什么要多次包含同一个脚本？
@MathewAlden 天哪。 ID有问题，现在我不需要任何脚本。它工作正常。有时问题是开发盲目性：D 谢谢！对此做出回答，以便我可以将其标记为答案。
您的 HTML 代码存在一些问题：(1) iframe ID 应该是唯一的，(2) 您在 javascript 代码中引用的 iframe ID (#reservationIframe8112) 与 iframe 不匹配实际ID（#reservationIframe），（3）你不需要将'iframeResizr'（<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.8.3/iframeResizer.min.js"></script>）导入每个div；您只需在页面<head> 部分中导入一次。如果您修复了这些问题，您将已经看到页面外观发生了变化（例如，请参阅：jsfiddle.net/aexh24so）[继续]

标签： javascript html css iframe

【解决方案1】：

首先，您的不同 iframe 不能都具有相同的 ID。即使有些是隐藏的，它们仍然必须有不同的 ID。

【讨论】：