如何将页脚保留在页面底部（HTML Javascript css）

问题描述：

如何将页脚保留在页面底部。这里是我的代码：如何将页脚保留在页面底部（HTML Javascript css）

<footer> Copyright 2013 All rights reserved.

那它..大声笑，反正是没有办法，我可以用它来打倒页脚到页面的底部，因为当我使用<footer>代码它停留在任何CSS中间而不是底部

你能在http写了演示：/ /jsbin.com/ – 2013-04-24 00:43:16

答

我认为你所需要的只是一个粘性的页脚。看看http://ryanfait.com/sticky-footer/

答

你可以使用CSS：

.footer { 
    position:fixed;bottom:0; 

    width:100%; 
    display:block; 
}

这会使页脚粘在浏览器窗口的底部，始终可见，如果页面更长，则会重叠其他内容。我认为OP需要澄清他们是否想要，如果这只是关于没有达到折叠的较短页面。 – bobsoap 2013-04-24 00:55:20

Ahhhh。那么如果OP需要别的东西，我会使用jquery waypoints（http://imakewebthings.com/jquery-waypoints/）来听取滚动点（或其他元素）的位置，并且在满足阈值时，执行以上。 – jahrichie 2013-04-28 02:36:50

答

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

答

我用：

#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的顶部，然后清除p标签在你的HTML像这样

<div id="copyright"> 
<p class="clear">&copy herp derp</p> 
</div>

如何将页脚保留在页面底部（HTML Javascript css）

相关推荐