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

只需在%中给出div的高度和宽度。

检查它是否适合您。

Answer 2

我使用你的屏幕高度的唯一元素是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.享受！

Answer 3

这应该可以解决问题的 DEMO

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

如果这不起作用，请告诉我。

Answer 4

它会不断缩短，因为您为该大小硬编码了一个像素值。由于硬编码值，大小不会扩展/缩小。

如果你想获得整个高度，你需要删除你在读取高度之前设置的px值。

Answer 5

我不是100％确定这是你正在寻找的东西 - 听起来你希望#mainContent填满整个窗口，除了底部40px。如果是这样，这应该适合你：

<强> HTML

<div id="mainContent">This is the main content</div>
<div id="footer">This is the footer</div>

<强> CSS：

#mainContent {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px;
    background:#F0F0F0;
    overflow:auto;
}
#footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:40px;
    background:#FCC;
}

工作示例：http://jsfiddle.net/nvNRY/1/

修改如果您不希望#mainContent像框架一样（即使用它自己的滚动条），则只需在body标记的底部添加40px填充。不要绝对定位#mainContent，它会与填充相对应，而#footer将与填充重叠。

编辑2： 标题和显示overflow:scroll的示例是操作：http://jsfiddle.net/nvNRY/2/

Answer 6

像RaraituL说的那样，你可以使用粘性页脚。然后，如果你真的想做100％高度的东西，你可以做类似的事情：

#mainContent { height: 100%; box-sizing:border-box; padding:0 0 40px;}

添加所有供应商前缀，您应该具有正确的大小。关于box-sizing的更多信息See here。

Answer 7

您可以使用media query为特定大小的浏览器加载不同的css文件。

@media (min-device-width: 640px) { ... }

就像这个http://mediaqueri.es/

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

7 个答案: