Hri*_*sto 88
UPDATE
我原来的答案是很久以前的,而且链接被打破了; 更新它以使其继续有用.
我将包括更新的内联解决方案,以及JSFiddle的工作示例.注意:我依赖于CSS重置,但我没有将这些样式包括在内.请参阅normalize.css
解决方案1 - 保证金抵消
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
HTML
<div id="wrapper">
<div id="content">
<h1>Hello, World!</h1>
</div>
</div>
<footer id="footer">
<div id="footer-content">Sticky Footer</div>
</footer>
CSS
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #e3f2fd;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 50px; /* the footer's total height */
}
#content {
height: 100%;
}
#footer {
height: 50px; /* the footer's total height */
}
#footer-content {
background-color: #f3e5f5;
border: 1px solid #ab47bc;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
解决方案2 - flexbox
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
HTML
<div id="content">
<h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
background-color: #e3f2fd;
flex: 1;
padding: 20px;
}
#footer {
background-color: #f3e5f5;
padding: 20px;
}
以下是一些链接,包含更详细的解释和不同的方法:
原始答案
你是这个意思吗？
http://ryanfait.com/sticky-footer/
此方法仅使用15行CSS,几乎没有任何HTML标记.更好的是,它是完全有效的CSS,并且适用于所有主流浏览器.Internet Explorer 5及更高版本,Firefox,Safari,Opera等.
此页脚将永久保留在页面底部.这意味着如果内容超过浏览器窗口的高度,则需要向下滚动才能看到页脚...但如果内容小于浏览器窗口的高度,则页脚将粘贴到底部浏览器窗口而不是在页面中间浮动.
如果您需要有关实施方面的帮助,请与我们联系.我希望这有帮助.
ova*_*riq 42
这将使div固定在页面底部,但如果页面很长,则只有在向下滚动时才会显示.
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
高度和margin-top应该相同,以便页脚不显示内容.
Jas*_*rge 20
您的标题和评论意味着您没有寻找粘性页脚(当内容在其下方滚动时粘在窗口的底部).我假设您正在寻找一个页脚,如果内容没有填满窗口,将被强制到窗口底部,如果内容超出窗口边界,则向下推到内容的底部.
您可以通过以下方式完成此操作.
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>来源:如何将页脚保持在页面底部
看看这个,适用于Firefox和IE
<style>
html, body
{
height: 100%;
}
.content
{
min-height: 100%;
}
.footer
{
position: relative;
clear: both;
}
</style>
<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
小智 7
使用<div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>.页脚不会向上
我使用的一个简单的解决方案，适用于 IE8+
在 html 上给出 min-height:100% 以便如果内容较少，则静止页面将采用完整的视口高度，而页脚则停留在页面底部。当内容增加时，页脚随着内容向下移动并保持在底部。
JS小提琴工作演示：http : //jsfiddle.net/3L3h64qo/2/
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
308430 次 |
| 最近记录： |