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语句。

这是一个非常简单的小提琴：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()

        })();

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

1 个答案: