当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，就要解决如何使元素粘住浏览器底部。让一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。& Z$ v3 I, c) K) D 方法一：全局增加一个负值下边距等于底部高度 ! s4 h, C, H/ N8 z4 B' S) W0 z y9 ^. ~. W! _8 f, t html代码：2 k( x/ `2 x6 q# a5 z <body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>' f$ [$ Z+ U/ S/ B2 v; j 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;
}. d8 M( h! E( n4 D; Q4 U 方法二：底部元素增加负值上边距 j+ s+ |7 f1 C: O6 O% j0 |* _; K ; Y' f; P' E* P HTML代码：( a4 e) o Z2 l9 Y7 W# U <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()计算内容的高度 $ U/ O) u# W) Y 5 R, u6 v* C1 \& L, l, ?( I % v5 e- f0 d8 P# Z4 w <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>% G1 q1 X6 H# s/ Y6 X" ~ .content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}: Y# P) I0 b7 | 方法四：使用flexbox 8 x$ H; w" d* F8 q2 J HTML:/ ^% `* ~5 `3 i0 Q) i/ I - @" H, K5 g: M <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>! L# S: N1 f& B; z html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}方法五：使用grid布局 9 R) [" c! T8 O2 I% ` 5 K& ^6 ^3 G/ L j& U/ w1 H& g. @) H <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>' D2 r2 [7 d4 b 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