当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,就要解决如何使元素粘住浏览器底部。让一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。3 Z$ m7 M7 P1 n9 \* ~5 B
方法一:全局增加一个负值下边距等于底部高度
; C' H* N6 d8 S/ q! L* g9 l 有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。
& Y T" L7 d* ], fhtml代码:5 [* p, g! b2 u# v5 Y
- <body>
- <div class="wrapper">
- content
- <div class="push"></div>
- </div>
- <footer class="footer"></footer>
- </body>
css代码:
$ [0 u* F( @/ z. g- 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元素是智能的,它并没有占用到底部的利用,而是通过全局加了一个负边距来填充。 4 D3 ~- [7 B8 e& V
方法二:底部元素增加负值上边距9 @( L& o' d5 P5 K# s
虽然这个代码减少了一个.push的元素,但还是需要增加多一层的元素包裹内容,并给他一个内边距使其等于底部的高度,防止内容覆盖到底部的内容。 & |& T1 C8 _0 ?' P& `2 d$ V+ l
HTML代码:
: @ U; W5 I- d& s M- <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;
- }
方法三:使用calc()计算内容的高度
4 P$ o, K) c6 ]" O5 qHTML:
% y# z4 K1 U# {8 x0 y, t9 [+ E
- h2 z6 X r6 U# L' L9 s6 l8 U0 W- <body>
- <div class="content">
- content
- </div>
- <footer class="footer"></footer>
- </body>
CSS:
$ D/ I6 w Y+ j+ m7 Y) d- .content {
- min-height: calc(100vh - 70px);
- }
- .footer {
- height: 50px;
- }
给70px而不是50px是为了为了跟底部隔开20px,防止紧靠在一起。
5 h: G2 f0 q6 }' g1 ]& K; w方法四:使用flexbox
! p6 { H# b# y" U! Z. kHTML: " K# [- z7 ^9 Q
, H" G+ N8 p9 m y& E: t! J2 W- <body>
- <div class="content">
- content
- </div>
- <footer class="footer"></footer>
- </body>
CSS:
! y. F/ V3 e/ `; B y" w- html {
- height: 100%;
- }
- body {
- min-height: 100%;
- display: flex;
- flex-direction: column;
- }
- .content {
- flex: 1;
- }
方法五:使用grid布局, P- m/ i$ D Y% \5 Y/ R
HTML: & h- p" G# C' T# @" a( I
" g- h0 [* w' C$ J2 Q- o
- <body>
- <div class="content">
- content
- </div>
- <footer class="footer"></footer>
- </body>
CSS:
# ~, C$ p1 [# P2 U- html {
- height: 100%;
- }
- body {
- min-height: 100%;
- display: grid;
- grid-template-rows: 1fr auto;
- }
- .footer {
- grid-row-start: 2;
- grid-row-end: 3;
- }
grid早于flexbox出现,但并没有flexbox被广泛支持,你可能在chrome Canary或者Firefox开发版上才可以看见效果。 |