抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

这个布局是用来实现,让底部信息(例如版权)始终保持在页面最底部的效果。

类似于下面图片的效果,让关闭按钮始终保持在最底部。

代码:

1
2
3
4
5
6
<!-- body --> 
<div class="container">
<div class="content">content</div>
<div class="push"></div>
</div>
<div class="footer">footer</div>

container的负底部外边距与footerpush的高度相同。push的作用是将footer推下去,否则content内容太多时会与footer重叠。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
* {
margin: 0;
}

html,
body {
height: 100%;
}

.container {
min-height: 100%;
margin: 0 auto -100px;
}

.footer,
.push {
height: 100px;
}
</style>

评论