当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，就要解决如何使元素粘住浏览器底部。让一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。' f' Y5 s: Z2 A 方法一：全局增加一个负值下边距等于底部高度 , _- t& d0 F$ G s k0 U ( V9 N1 ]6 M" v% `( u. H ' l5 I4 p" C7 M- R+ D* R# \. k0 p <body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>: h# g" X" i* W5 S6 K7 @" A 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;
}) l0 o8 G+ j: _5 B5 B# S" d$ _ 方法二：底部元素增加负值上边距 % \1 p+ j# T& L* C3 q& m 虽然这个代码减少了一个.push的元素，但还是需要增加多一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。 . I' V1 U8 K$ Y9 w2 E' Q # }3 m' C0 X, A: k0 S% A0 ]4 X <body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}方法三：使用calc()计算内容的高度 ( p4 {, s/ M$ s4 L" p* N 4 B8 ?+ \! Y7 `: D) t& c. g 0 L* W1 g/ {0 m' E <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>$ `$ X! [3 T4 U; m$ [) b1 p .content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}6 O3 W2 Z, }1 w% ^0 ^4 M 方法四：使用flexbox 1 E+ c% M, U0 g) u: u! M HTML:, N6 t, Z8 U2 U0 s2 L1 s 7 ]3 I- ~+ `7 x. N8 a. T <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>6 t4 n" ^4 Z9 w5 ?0 } html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}方法五：使用grid布局 0 J) Z! E B* L) Q7 h/ V + x$ p K6 R$ C& A! ^ 1 ]$ _8 A6 Z0 M* H <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>% _4 D9 L+ q6 H- c6 P0 z html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
} 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-7-9 08:40:30