使CSS脚注位于浏览器窗口底部或内容底部 [英] Making a CSS footer either sit at the bottom of the browser window or bottom of content

问题描述

重复此问题。

Duplicate of this question.

我有一个现有网站（ jacquelinewhite.co.uk ），它上面有一个页脚。目前，此页脚始终位于主要内容下。我想让它浮动到浏览器窗口的底部，或者如果内容大于窗口，留在内容的底部。

I've got an existing site (jacquelinewhite.co.uk), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content.

有效HTML结构如下：

Effectively the HTML is structured like this:

<div id="container">
  <div id="top_bar">
  </div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>

我尝试过绝对位置，底部为0，将页脚放在窗口的底部，但是如果窗口的内容较大，则页脚覆盖内容。

I have tried absolute position, bottom 0, which puts the footer at the bottom of the window, but if the content of the window is bigger then the footer covers the content.

我应该如何解决这个问题？

How should I fix this?

推荐答案

这个对我来说总是很好： CSS Sticky Footer

This one's always worked well for me: CSS Sticky Footer

这篇关于使CSS脚注位于浏览器窗口底部或内容底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！