Question

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

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

谢谢

Answer 1

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

Answer 2

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

e.g。

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

有了这个，你可能还想在网站的内容上设置300px的填充，所以如果用户滚动到底部，那么他们可以看到内容的底部，而页脚没有重叠。你也想和你的z-index一起玩，以确保没有任何东西出现在页脚的正面。

Answer 3

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

这就是css的样子

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

Answer 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;}

Answer 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>

Answer 6

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

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

希望有所帮助：）

Answer 7

如果您将页脚设置为固定位置，即使页面长于窗口，它也会显示在您的内容上方。

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

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

创建页脚符div？

7 个答案: