Question

在此论坛上发帖之前我没有找到任何答案。

我需要在页面底部放置一个页脚，但我需要它足够灵活，可以按内容向下推，如果有足够的内容溢出页面。

我已经尝试了以下内容，它确实将它定位在我需要它的位置，但是它与内容重叠，而内容位于下方。

footer {
    position: fixed; 
    bottom: 0
}

我可以通过计算页脚上方的所有div高度来修复jQuery，但我想知道是否有办法只使用CSS来完成它。

Answer 1

您需要将position：fixed更改为relative。

我做了一个jsfiddle来帮助你了解它是如何工作的。

jsfiddle

jsfiddle above the fold

我根本不是jquery / javascript的神，但我发现这个有用的链接可以找到浏览器的最大高度。您可以使用此代码来查找浏览器的高度，然后，我最好的猜测是if语句。如果footer或div高于此高度，请执行.css('position', 'absolute');

browser height

当我在我的投资组合工作时，这也刚刚出现在我脑海中。如果您的页脚没有设置高度，那么您应该在background

中添加相同的html到CSS标记

html {
   background: #ff7200;
}

footer{
   background: #ff7200;
}

html footer jsfiddle

my portfolio（如果您查看投资组合，请进入控制台并从我的主页上删除一些标签M以查看其工作原理。）

此效果将填充footer标记中body或最后一个元素之后的任何空格。我认为这可能正是你想要的，因为你没有设定的高度。

Answer 2

HTML：

<body>
        <div class="wrapper">
            Your website content here.
            <div class="push"></div>
        </div>
        <div class="footer">
            Footer goes here
        </div>
</body>

CSS：

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; //negative margin must be the same as your footer/push height
}
.footer, .push {
height: 4em; //height of your footer
}

此处提供更详细的解释：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

编辑：使用jQuery计算动态高度计算：http://jsfiddle.net/KyVpc/

Answer 3

我建议您使用 Sticky Footer 模型，就像几乎所需要的那样。

事情是你无法预测你的页脚高度。好吧，你需要在 DOM ready ：

上使用这一小段jQuery代码

var footer = $("#footer");
var footerHeight = footer.outerHeight();
footer.css('margin-top', '-'+footerHeight+'px');

var main = $("#main");
main.css('padding-bottom', footerHeight+'px');

简单的做法是动态更改margin-top的负#footer和与padding-bottom高度相对应的#main的{{1}}。 / p>

<强> The Demo

使用CSS将div放在页面底部

3 个答案: