3

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

4

7 回答 7

2

只需在%.

检查它是否适合您。

于 2013-05-15T13:34:11.923 回答
2

我唯一使用屏幕高度的元素是 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。但是没问题。它是你的电话。这是小提琴。享受！

于 2013-05-15T13:49:34.927 回答
1

这应该可以解决 问题

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

});

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

于 2013-05-15T15:27:20.933 回答
0

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

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

于 2013-05-15T13:34:10.950 回答
0

我不是 100% 确定这就是你要找的东西——听起来你想#mainContent填满整个窗口，除了底部的 40 像素。如果是这样，这应该对你有用：

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/

于 2013-05-15T13:40:11.553 回答
0

就像 RaraituL 所说，您可以使用粘性页脚。然后，如果你真的想做 100% 高度的东西，你可以这样做：

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

添加所有供应商前缀，您应该具有正确的大小。有关更多信息，请参见此处box-sizing。

于 2013-05-15T13:41:13.747 回答
0

您可以使用媒体查询为特定大小的浏览器加载不同的 css 文件。

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

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

于 2013-05-15T13:49:19.243 回答