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

Question

是的，所以我决定创建一个 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:添加了第二次尝试。

Answer 1

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

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

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

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

由您负责重置/考虑任何可能折叠的垂直边距或其他任何内容以获得正确的图形以应用于函数。

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

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.享受吧!