20

当我使用没有内容的相对位置时，页脚上升，绝对有很多内容，页脚下降，并且固定它总是在那里。

有没有一种简单的方法可以在页面末尾独立于内容，随内容缩小和增长？

当内容很多时，我们可以在第一页看到页脚，当内容很少时，我们会在底部看到。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html,body {
            padding: 0;
            margin: 0;
        }

        header {
            position:fixed;
            top:0;
            width:100%;
            height:40px;
            background-color:#333;
            padding:20px;
        }

        footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: relative;
        }
        #main{
            padding-top:100px;
            text-align:center;
        }
  </style>
</head>
<body>
    <header>
    header
    </header>

    <div id="main">
    main
    </div>

    <footer>
    footer
    </footer>
</body>
</html>
4

4 回答 4

29

对于页脚更改position: relative;从position:fixed;

 footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: fixed;
        }

示例：http: //jsfiddle.net/a6RBm/

于 2013-04-12T16:20:13.620 回答
10

这是一个使用 css3 的示例：

CSS：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML：

<div id="wrap">
    body content....
</div>
<footer class="footer">
    footer content....
</footer>

jsfiddle

更新
正如@Martin 所指出的，'position: relative' 在.footer元素上不是强制性的，对于clear:both. 这些属性仅作为示例。因此，将页脚粘贴在底部所需的最小 css 应该是：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}

此外，css-tricks 上有一篇出色的文章展示了不同的方法：https ://css-tricks.com/couple-takes-sticky-footer/

于 2015-09-25T11:54:01.593 回答
6

我会在 HTML 5 中使用它...只是说

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
于 2014-03-05T20:16:16.780 回答
0

只是设置position: fixed为页脚元素（而不是相对）

Jsbin 示例

请注意，您可能还需要将 a 设置margin-bottom为main至少等于页脚元素高度的元素（例如margin-bottom: 1.5em;），否则，在某些情况下，主要内容的底部区域可能会与页脚部分重叠

于 2013-04-12T16:19:48.883 回答