-4

如何将页脚保持在页面底部？这是我的代码：

<footer> Copyright 2013 All rights reserved.

就是这样。是否有任何 CSS 可用于将页脚降低到页面底部，因为当我使用<footer>代码时，它会停留在中间而不是底部。

4

3 回答 3

10

你可以只使用CSS：

.footer {
    position:fixed;bottom:0;

    width:100%;
    display:block;
}
于 2013-04-24T00:47:55.083 回答
2

我用：

#footerbox {
height:125px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FF9966;
font: normal 13px verdana, sans-serif;

我建议将高度设置为您喜欢的任何值，但我会保持它更大以包含所有信息，例如法律资料，联系信息等。然后，对于版权，我使用

#copyright {
height:20px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font: normal 13px verdana, sans-serif;
border-top:2px solid #FF9966;
}

希望这会有所帮助。您还可以将宽度设置为您想要的任何值，像素或百分比。如果这是您想要的，将它连接到底部并不难。要使版权与较大的页脚重叠，只需使用

.class{
clear:both;
}

在 CSS 的顶部，然后像这样清除 HTML 中的 P 标签

<div id="copyright">
<p class="clear">&copy herp derp</p>
</div>
于 2013-04-24T01:54:18.413 回答
0

1) 给出<body>100% 的高度

body { height:100%; }

2) 假设 HTML 结构如下：

<div id="container">
  some content
</div>
<footer>
  Copyright 2013 All rights reserved.
</footer>

，并假设您<footer>的40px身高，将其添加到#container：

#container { min-height:100%; padding-bottom:40px; margin-bottom:-40px; }
于 2013-04-24T00:50:49.780 回答