下面详细讲解如何使用CSS实现Footer置底。
方式一：使用flex布局
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex-shrink: 0;
}
使用flex布局，将body设置为display:flex，并且设置flex-direction为column，使得body的子元素依次排列。通过给.content设置flex:1，使其占据剩余空间，这样即可实现Footer置底。而对于Footer元素，设置flex-shrink:0，使其不随着内容的变化而缩小。
示例代码如下：
<body>
<div class="content">Content</div>
<div class="footer">Footer</div>
</body>
方式二：使用绝对定位
body {
position: relative;
height: 100%;
}
.content {
height: calc(100% - 50px); /* 50px是footer的高度 */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
使用绝对定位，将body设置为position:relative，然后通过设置.content的高度为calc(100% - 50px)，使其占据除Footer以外的所有剩余空间。最后，对于Footer元素，则设置为position:absolute，并且bottom:0，使其固定在页面底部。
示例代码如下：
<body>
<div class="content">Content</div>
<div class="footer">Footer</div>
</body>
以上是两种实现CSS Footer置底的方式，可以根据具体情况选择适合自己的方式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解CSS五种方式实现Footer置底 - Python技术站
微信扫一扫 
支付宝扫一扫 