Question

我有一个隐藏的div元素，当单击按钮时会显示该元素。

https://handybin.com.au/（在线预订）

我在CSS中设置div的宽度和高度：

.booking-inner-popup {
    width: 80%;
    height: 90vh;
    background-color: #fff;
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 40px auto;
    border-radius: 0;
}

我使用jQuery通过以下方式设置相对于浏览器视口的宽度和高度：

jQuery(document).ready(function(){
    var windowHeight = jQuery(window).height();
    jQuery('#BookingFrame').css('height', windowHeight * 0.9 | 0);

    jQuery( window ).resize(function() {
        var windowHeight = jQuery(window).height();
        jQuery('#BookingFrame').css('height', windowHeight * 0.9 | 0);

    });

});

这在浏览器和Android上都可以正常工作（因为它提供了内容看不见的滚动条），但在Apple设备上却没有（没有滚动条）。

在iPad上查看时-高度远远超出了屏幕底部，从而切断了表单的底部，包括“提交”按钮，并限制了任何人使用表单。

我已经用谷歌搜索并尝试了一些解决方案，但是没有一个起作用。有什么想法吗？

更新

我将提供的链接中列出的设置应用于工作版本：

更改了jQuery以调整wrapper-div的大小
将滚动添加到包装div
设置iframe高度= 100％并滚动=“否”

https://jsfiddle.net/oleymedia/f4L6skmy/

不起作用。

桌面：iframe将其高度设置为div高度的100％ iPad：仍然没有滚动

Answer 1

移动Safari上的iFrame始终会拉伸以适合所有可用内容。您应该在这里查看以下问题：IFrame height issues on iOS (mobile safari)-但是将iframe包裹在div上并在该div上设置高度限制应该可以。

如何在iPad上控制div高度

1 个答案: