Question

这是一个示例HTML页面：

<html>
  <body>
    <div class="content"> 
    </div>
    <footer>&nbsp;</footer>
  </body>
</html>

这是我的样式表：

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  height: 100%;
}

.content {
  width:  8cm;
  position: absolute;
  background-color: #ff0;
  height: 15cm;
}

footer {
  position: absolute;
  bottom: 0;
  background-color: #f00;
  width: 100%;
}

这就是它的样子：

How the code is rendered.

我的问题是我希望红色页脚位于页面的底部（而不是视口的底部），假设.content实际上是可变高度。没有JavaScript可以吗？

Answer 1

This Fiddle显示的页脚始终位于页面最低点或视口底部。

当内容未填满页面时，DIV位于视口的底部，当内容比视口高时，DIV位于内容的下方。

要完成此操作，请在min-height上使用body，如下所示：

html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
}

footer {
    position: absolute;
    bottom: 0;
}

在Safari 8.0.3中测试。

CSS：将DIV置于页面底部

1 个答案: