Question

我有一个页面没有填满整个屏幕的高度，但我希望页脚保持在屏幕下方，这样当你开始滚动时它就会出现 - 无论人的屏幕高度如何。

如何使用CSS完成此操作？

修改

我试过了：

#footer{
    position:absolute;
    left:0px;
    top:100%;
}

这样可行，但如果我的页面超出屏幕高度，则会受到影响。我真的需要兼容两种类型的页面。

Answer 1

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  padding-bottom: 40px; /* free space for the footer */
  box-sizing: border-box; /* don't add padding to the actual height */
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
}

Answer 2

以下是您描述的布局的简单示例：

<强> HTML

<html>
<head><title>Hidden Footer</title></head>
<body>
    <div id="content">
        Content here
    </div>
    <div id="footer">
        Footer here
    </div>
</body>
</html>

<强> CSS

html,
body { height: 100%; min-height: 100%; }

#content { min-height: 100%; }
#footer { background: #ccc; }

Answer 3

您关联的网页有固定的标头。身体的其余部分适当滚动。

查看固定的CSS页眉/页脚以复制效果。

创建位于屏幕下方的页脚元素

3 个答案: