jquery - slimScroll 'auto' : div height in percentages to work on iPhone and desktop; pushes bottom div down

Question

为标题道歉，但我想不出更好的措辞方式。我最近偶然发现了 Firebase，并想尝试制作一个简单的购物 list 应用程序，这样我和我的妻子就可以在其中添加/删除元素，无论我们是在工作中、在家还是在外，以及在我们的手机上。

我创建了这个 fiddle 来展示我目前正在做的事情:http://jsfiddle.net/YJQ8R/6/

我有一个包装所有内容的容器 div:

#container {
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 668px;
}

针对iPhone修改如下:

@media screen and (max-device-width: 480px){
    #container {
        height: 100%;
        width: 100%;
    }
}

连同我在网上找到的一些代码，可以禁用双指缩放，使其表现得更像一个本地应用程序，只有当浏览器是 iPhone 时才会添加:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

购物 list 元素被添加到这个 div:

#shoppingListContents {
    min-height: 70%;
    max-height: 70%;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

当尝试按如下方式使用 slimScroll 时(在 fiddle 中注释掉，因为我看不到如何包含它):

$("#shoppingListContents").slimScroll({
        height: 'auto',
        wheelStep: 2
 });

为了适应百分比高度 div，它将表单向下推到底部以下，如下图所示:

当我为 slimScroll 使用恒定高度但我想为 iPhone 避免这种情况时，它工作正常。

最终我想要实现的是在 #shoppingListContents div 上使用 slimScroll，它将占据容器的大约 70%，底部的表单占据 25% 左右。

我愿意接受任何和所有关于任何事情的批评/建议，因为每一天都是学习把事情做得更好的好日子!

注意。删除了 Firebase 内容，因为它与问题无关。

Answer 1

我敢肯定这可能很糟糕，但我几乎可以通过以下方式解决我的问题:

if(navigator.platform === "iPhone") {
    containerHeight = $(window).height();
    formHeight = 0.24*containerHeight;
    listHeight = 0.7*containerHeight - 40;

    $("#container").css({"height": containerHeight});
    $("#shoppingListContents").css({"min-height": listHeight});
    $("#shoppingListContents").css({"max-height": listHeight});
    $("#shoppingListForm").css({"height": formHeight});
}

列表高度的容器的 70% 将表单推到它外面，所以这就是为什么有 40 像素的偏移量。然后将 slimScroll 高度设置为 listHeight，我可以让 slimScroll 在我的 iPhone 上工作，但它真的很慢并且实际上已经脱离了正常的浏览器滚动，所以我只为桌面版本添加它。