创建页脚 div？答案

【问题标题】：Creating a page footer div?创建页脚 div？
【发布时间】：2014-02-26 17:58:27
【问题描述】：

我需要创建一个页脚，基本上是一个可拉伸 100% 页面宽度的 div。高度为 300 像素。我需要它坚持到页面的绝对底部。有人可以告诉我如何使用 CSS 做到这一点吗？

我没有包含代码，因为代码只是 div 标签。

谢谢

【问题讨论】：

你有没有尝试过？一些css代码或类似的东西，除了你的<div>标签？ :P
嗨 - 有一百篇关于如何做到这一点的文章。您只需要一个快速的 Google。
使用给定尺寸创建潜水添加到 css 位置：固定；
有一个叫做“CSS”的魔术，试着google一下。 . . :P
Fix footer to bottom of page的可能重复

标签： jquery css css-position footer sticky-footer

【解决方案1】：

div {
    background-color:red;
    height:300px;
    position:fixed;
    bottom:0;
    width:100%;
}

【讨论】：

【解决方案2】：

如果你想要一个粘性页脚，那么你想使用css位置样式fixed

例如

div#footer{
    position: fixed;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
}

这样，您可能还想在网站内容上设置 300 像素的内边距，这样如果用户滚动到底部，他们就可以看到内容的底部，而不会与页脚重叠。您还需要使用您的 z-index 来确保页脚前没有出现任何内容。

【讨论】：

【解决方案3】：

我为你创建了一个小提琴：http://jsfiddle.net/X9gMD/

这就是 css 的样子

.footerDiv{
width:100%;
height:300px;
background-color: yellow;
position: absolute;
bottom:0px;
}

【讨论】：

【解决方案4】：

JSFiddle：http://jsfiddle.net/Z6HMb/

简单的 HTML 示例：

<div id="footer">This a footer text</div>

CSS

#footer{position:absolute; height:300px; width:100%; bottom: 0%; background-color:red;}

【讨论】：

【解决方案5】：

使用位置fixed(fiddle)。

CSS：

body {
    background-color: blue;
    height: 2000px;
}

div {
    background-color: red;
    position: fixed;
    height: 300px;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML：

<body>
    <div>Footer</div>
</body>

【讨论】：

【解决方案6】：

要修复页脚，请使用position: fixed CSS 属性。像下面这样的东西会有所帮助。

footer.div{
    height:300px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
}

希望有帮助:)

【讨论】：

【解决方案7】：

如果您将页脚设置为 position: fixed，它会出现在您的内容上方，即使页面比窗口长。

如果您只想将页脚保持在底部，即使内容很短，也有答案：Sticky footer on Stack overflow

这样，您的页脚将停留在页面底部或内容末尾。

【讨论】：