当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，就要解决如何使元素粘住浏览器底部。让一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。. b- J3 G" I: m2 Q x3 Z) y 方法一：全局增加一个负值下边距等于底部高度 8 h1 f0 v+ ~5 d ~8 K7 }' ^- l, G7 T 有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。 ' x& r! n' M, y * E% ?: U r! p0 h1 y# O/ D <body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>7 E% d! q# e+ S7 Z$ z5 Q; 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;
}! Y0 I# L) J3 |6 Y3 }7 ? 方法二：底部元素增加负值上边距 ; G# i" R' j3 N8 y 虽然这个代码减少了一个.push的元素，但还是需要增加多一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。 ' K) z9 l6 |7 |. a- b4 p0 u HTML代码：5 j" ~* ?: r b. ^# ^$ [ <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()计算内容的高度 6 U7 M4 G7 J+ L! @/ q( _2 ]* o- r - R$ ~/ K7 E3 m; \2 ^ 4 p1 j7 z8 Q5 q" Y <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>$ ]5 X6 l5 }7 H3 K1 } .content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}5 d% s) O7 c% A' S% M, Z 方法四：使用flexbox ( B+ L" N: J, Z( L1 w' o6 e9 k 4 T- m, I2 V5 M" R. p/ g; L+ y & \$ T4 b5 B" |8 | <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>$ L* H" i" r. ?" Q& b/ @* H html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}方法五：使用grid布局 $ b, ~8 E3 z6 M% p! S HTML：9 V, F' V$ N; s # V# S4 Q) s U <body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>. ^; A, \( ?( T$ ?) M 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