javascript - 根据可用的屏幕空间将动态高度设置为 div

Question

我需要实现的是:

一个用于智能手机的网页，其中包含一系列具有高度、填充、边距等的 div。底部的一个特定 div 应与 (window.innerHeight 减去他之前的所有其他 div 的高度一样高) 这样 javascript 就可以固定一个固定的高度(它必须是动态的，因为我不知道设备屏幕的高度)并且我可以通过 CSS overflow:auto 进行设置并使其可滚动。

我开始使用的 js 如下:

        (function() {
        function resize(delta) {

            var heights = window.innerHeight;
            jQuery('.dynamic-height').css('height', (heights - delta) + "px");
        }

        if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
            resize(20);

        } else {
            resize(0);

        }
    })();

您可以忽略 if/else 语句。

这是一个非常简单的 fiddle :http://jsfiddle.net/omegaiori/k56wj/

必须具有动态高度的 div 是 div.dynamic-height(紫色背景)。

非常感谢您的帮助，这将是救命稻草! :)

Answer 1

试试这个， Demo

        (function() {
            function resize() {
                total = 0;
                jQuery('.cont div').each(function(){
                    total += parseInt($(this).css('margin-top').split('px')[0])+parseInt($(this).css('margin-bottom').split('px')[0])+$(this).height()

                });
                var heights = window.innerHeight;
                var dy_height = heights-total

                jQuery('.dynamic-height').css('height', dy_height + "px");
            }
resize()

        })();