Question

如何构建像Facebook应用程序设计这样的固定页脚？ css的例子很受欢迎。

Answer 1

一种方法是here：

在HTML中：

<div id="container">
  <div id="content"></div>
  <div id="footer"></div>
</div>

在CSS中：

#container {
  position:absolute;
  min-height:100%;
}

#content {
  margin-bottom:100px; /* same as footer height */
}

#footer {
  position:absolute;
  bottom:0;
  height:100px; /* same as content margin-bottom */
}

修改：该链接基于this，但有一些例外情况

Answer 2

Facebook的页脚会在您滚动时保持不变。要做到这一点，你需要这样的HTML：

<body>
  <div id="content">
    [content]
  </div>
  <div id="footer">
    [footer]
  </div>
</body>

和CSS这样：

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #f00;
}

CSS position: fixed指示浏览器保持此元素的位置不变，无论滚动如何。

Answer 3

我发现CSS Play是一个非常有用的网站。

http://www.cssplay.co.uk/

更具体地说，http://www.cssplay.co.uk/layouts/，用于布局。

Answer 4

CSS Sticky Footer的更多示例。

编辑：Another example，略微更干净的CSS

如何获得像facebook应用程序设计这样的固定页脚

4 个答案: