如何在浏览器调整大小时调整div大小

是的，所以我不使用粘性页脚，而是决定创建一个 jQuery 函数来更改 #mainContent div 的大小，以便页脚可以很好地适应。

基本上我想做的是

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

Where

#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：添加了第二次尝试。

I the 仅元素使用屏幕高度是 mainContent div 和页脚，并且您决定通过 javascript+jquery 函数以响应方式控制页脚，使用窗口或文档高度来计算内容 div 高度，如下所示：

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

一个展示它按您的要求工作的示例。

我为您编写了一个简单的标记，但足以向您表明它也应该适合您。

您需要负责重置/考虑任何可能折叠的垂直边距或其他任何内容，以获得适用于函数的正确数字。

我只是为了我的示例而对 mainContent 规则应用了 min-height 声明。当然你根本不需要那个以及我使用的那些可怕的颜色:)

The 位置页脚功能不需要这么扩展。我这样写是出于教学目的

这里是代码：

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

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

Any way,我无法想象为什么你不想应用完整的 CSS 解决方案而不是使用 javascript。但是没问题。由你决定。这是小提琴。 http://jsfiddle.net/Fico/jAE4e/ Enjoy!