当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，就要解决如何使元素粘住浏览器底部。让一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。( T: ], Z5 U" ` |/ \$ t; A ?1 v 方法一：全局增加一个负值下边距等于底部高度 ) n! E6 z% E) p0 P) } 有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。 ' ^. A; v; u! B4 S$ P T6 M+ G9 W html代码：0 [7 s# o5 s+ h. { <body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>) G$ V) q7 f* `% h+ d( _8 y 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;
}7 U6 `5 v8 [9 Q' z, w4 T 方法二：底部元素增加负值上边距 ) p, A* B/ @% @6 r6 }* |! f 虽然这个代码减少了一个.push的元素，但还是需要增加多一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。 5 n! @1 s1 f& B, M, l! q HTML代码：4 O, ^" ?: J1 t <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()计算内容的高度 / M! K; P; x0 v; _+ s- w: P HTML:* X1 u) `5 H7 z, H/ a2 B ' C5 U' h% ~' v/ W% H, X. h7 j1 p <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>) N( N [) l4 J9 P .content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}2 F! `# u5 f6 J9 q 方法四：使用flexbox $ G7 z$ `+ P; `; ^ HTML:) |0 v/ F7 I; \1 A- A" } 0 f M9 s& H% m o <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>: O% n. C, n ^2 v9 ~. v4 q html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}方法五：使用grid布局 ' o' b$ I- W/ t6 v HTML：9 `8 ~* }5 x. u/ D ; ?0 `! b8 o, m/ y5 I1 B O& t: s6 E <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>3 D/ k7 d" c5 f- b2 @) P 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