时间戳

首页 > 解决方案 > 如何在 iPad 上控制 div 高度

javascript - 如何在 iPad 上控制 div 高度

问题描述

我有一个隐藏的 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 上查看时 - 高度远远超出屏幕底部，切断了表单的底部，包括提交按钮，并限制任何人使用表单。

我已经用谷歌搜索并尝试了一些解决方案，但它们都不起作用。有任何想法吗？

更新

我将链接中概述的设置应用到工作版本：

  1. 更改了 jQuery 以调整 wrapper-div 的大小
  2. 添加滚动到包装器 div
  3. 设置 iframe height=100% 和 scrolling="no"

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

不工作。

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

标签： javascriptjqueryhtmlcss

解决方案

移动 Safari 上的 iFrame 始终会拉伸以适应所有可用内容。您应该在这里查看这个问题：iOS (mobile safari) 上的 IFrame 高度问题- 但是将您的 iframe 包装在 div 上并在该 div 上设置高度约束应该可以工作。

推荐阅读