|
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。下面是效果图:
方法一:全局增加一个负值下边距等于底部高度
有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度,就像这个演示链接。 HTML代码
- <body>
- <div class="wrapper">
- content
- <div class="push"></div>
- </div>
- <footer class="footer"></footer>
- </body>
复制代码
CSS代码:
- html, body {
- height: 100%;
- margin: 0;
- }
- .wrapper {
- min-height: 100%;
- /* Equal to height of footer */
- /* But also accounting for potential margin-bottom of last child */
- margin-bottom: -50px;
- }
- .footer,
- .push {
- height: 50px;
- }
复制代码
这个代码需要一个额外的元素.push等于底部的高度,来防止内容覆盖到底部的元素。这个push元素是智能的,它并没有占用到底部的利用,而是通过全局加了一个负边距来填充。
方法二:底部元素增加负值上边距
虽然这个代码减少了一个.push的元素,但还是需要增加多一层的元素包裹内容,并给他一个内边距使其等于底部的高度,防止内容覆盖到底部的内容。 HTML代码:
- <body>
- <div class="content">
- <div class="content-inside">
- content
- </div>
- </div>
- <footer class="footer"></footer>
- </body>
复制代码
css:
- html, body {
- height: 100%;
- margin: 0;
- }
- .content {
- min-height: 100%;
- }
- .content-inside {
- padding: 20px;
- padding-bottom: 50px;
- }
- .footer {
- height: 50px;
- margin-top: -50px;
- }
复制代码
|
|