0

I have a page that does not fill the entire screen's height, but I want a footer to stay just below the screen, so that it appears right when you start scrolling - no matter the person's screen height.

How do I accomplish this using CSS?

EDIT

I have tried:

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

This works, but it gets in the way if my page does go over the screen's height. I really need compatibility for both types of pages.

4

3 回答 3

1

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

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; }
于 2012-10-27T20:35:25.977 回答
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;
}
于 2012-10-27T20:34:32.360 回答
0

您链接的页面有一个固定的标题。身体的其余部分适当地滚动。

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

于 2012-10-27T20:30:29.263 回答