javascript - 如何在浏览器上调整div的大小

是的，因此，我决定创建一个jQuery函数来更改我的#mainContent div的大小，而不是使用粘性页脚，以使页脚可以很好地放进去。

基本上我想做的是

 #mainContent { height: 100% - 40px; }

哪里

#footer { height:40px; }

我想出了

$(window).resize(function() {
    var mainContent = $('#mainContent').innerHeight() - 40;
    $('#mainContent').css("height", mainContent);
});

但是每次我调整大小时，它只会将#mainContent缩短40px，而不是重新处理#mainContent应该是的像素，然后是-40px；

$(window).resize(function() {
    var mainContent = $(document).height() - 80;
    $('#mainContent').css("height", mainContent);
});

我觉得我想念什么。

请帮忙。

编辑:页眉和页脚是静态的(即每个40px)，我想调整mainContent的大小而使页脚不流动(因为粘性页脚使用margin-top:-40px;)。我仍然希望页脚位于屏幕底部。
Edit2:添加了第二次尝试。

最佳答案

如果使用屏幕高度的唯一元素是mainContent div和页脚，并且您决定以响应方式通过javascript + jquery函数控制页脚，请使用窗口或文档高度，以将内容div的高度计算为所以:

 var mainContent = $(window).height() -40;
 var mainContent = $(document).height() -40;

一个示例，显示它按需工作。

我为您编写了一个简单的标记，但足以表明它也适用于您。

由您自己决定要重置/考虑可能会塌陷的任何可能的垂直边距，或者是其他任何事情，以便获得正确的数字以应用于该功能。

仅在我的示例中，我为mainContent规则应用了最小高度声明。当然您完全不需要以及我使用的那些可怕的颜色:)

positionFooter 函数不需要扩展。我这样做是出于教学目的

这里的代码:

$( function () {
    function positionFooter() {
        var wh = $(window).height();
        var wc = wh - 80;
        $('#mch').text(wc);
        $("#mainContent").height(wc);
    }
    $(window).resize(positionFooter);
    positionFooter();
});

当您将此解决方案传播到自己的代码时，请注意标识符，选择器等。

无论如何，我无法想象为什么您不想应用完整的CSS解决方案而不是使用javascript。但是没问题。它是你的电话。这是the fiddle.享受!