Question

（我正在寻找一个HTML / CSS修复，但如果确实没有，那么JS（最好是JQuery）适用于我）

我的页面中有两个主要的div，我有#maincontent和#footer。

基本上，我希望页脚始终位于页面的底部：

#footer{
position:fixed;
bottom:0;
}

但是当页面太小时，我不希望它在#maincontent上溢出。为了问题，页面可以被认为是简单的：

<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>

我的问题是我可以做其中一个，或者我将其修复到页面底部但是当我创建视口时＆lt; （页脚+ maincontent）页脚位于内容的顶部。我希望页脚始终位于页面底部，但在超出主要内容之前会在页面上消失。

Answer 1

如果你知道你的页脚的高度，无论窗户高度或其内容发生什么：

只需在您的身体或与页脚高度相匹配的主要内容中添加“填充底部”。

如果您不知道页脚的高度。这比较棘手，因为你可能需要一些javascript来计算页脚的高度，主要内容的高度，将两者的总和与窗口高度进行比较，如果它不合适，添加一些足够的底部填充到身体/主要内容。

编辑：

好的我明白了，我认为这个jsfiddle可以做到这一点：http://jsfiddle.net/ah4XA/2/

javascript将是：

$(document).ready(function () {

function updateFooter () {
    var footerH = $("#main-footer").height();
    var contentH = $("#main-content").height();
    var windowH = $(window).height();
    if ( contentH + footerH > windowH) {
        $("#main-footer").removeClass("fixed");
    } else {
        $("#main-footer").addClass("fixed");
    }
}

$(window).resize(function () {
    updateFooter();
});

updateFooter();
});

Answer 2

使用jQuery向页脚添加一个类，当视口太小时，它会将其更改为position: absolute。

$(document).ready(function() {

    var height = $(window).height();

    function windowHeight() {
        height = $(window).height();
    }

    windowHeight();

    $(window).resize(function() {
        windowHeight();
    });

    if (height < 600) { //arbitrary height value you can set yourself
        $('#footer').addClass('not-fixed');
    } else {
        $('#footer').removeClass('not-fixed');
    }
});

Answer 3

如果我了解您要查找的内容，则无论页面内容如何，您都希望页脚保留在窗口底部，但在窗口垂直调整大小时也不会与页面重叠。

一种可能的解决方案是使用媒体查询在position:absolute;和position: fixed;之间切换。所以超过一定高度它是固定的，但低于页脚position:absolute;。

<强> EXAMPLE FIDDLE

CSS：

@media all and (max-height:300px) {
  #footer {
    background: red; <- added for testing
    position: absolute;
  }
}

这种方法的唯一缺点是你需要知道设置切换的高度。这可能很棘手，但position:fixed;。

Answer 4

最简单的解决方案是永久地将页脚放在底部，并增加z-index的{{1}}，以便在窗口大小减小时覆盖页脚。

注意：这不是唯一的方法。

JSFIDDLE DEMO

示例CSS

maincontent

您应play使用CSS #maincontent{ height : 400px; background-color : green; /* position : relative is added to enable z-index. */ position:relative; /* z-index will bring it above footer, if window size is reduced. */ z-index: 1; width : 100%; } #footer{ height : 100px; width : 100%; background-color : black; /* Below two properties will postion footer at the bottom of the page. */ position : fixed; bottom : 0; color : white; }属性来完成此操作。

修改

这是另一个CSS解决方案：

position和maincontent包含在footer div中，其位置设置为相对位置，然后页脚位于w .r.t它。

JSFIDDLE DEMO 1 页脚位于正文下方但未显示。

JSFIDDLE DEMO 2 因为身高较低，所以会显示页脚。

HTML

bodyContainer

<强> CSS

<div id="bodyContainer"> <div id="maincontent">Dynamic Content </div> <div id="footer">StaticContent</div> </div>

将页脚位置更改为页面底部，直到达到内容为止

4 个答案: