要使页脚保持在页面最底部,可以使用CSS布局技术来实现。以下是一种常用的方法:
<style>
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex: 1;
}
.footer {
flex-shrink: 0;
}
</style>
<div class="container">
<div class="content">
<!-- 主要内容 -->
</div>
<footer class="footer">
<!-- 页脚内容 -->
</footer>
</div>
<style>
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: calc(100% - 50px); /* 50px是页脚的高度 */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px; /* 页脚的高度 */
}
</style>
<div class="content">
<!-- 主要内容 -->
</div>
<footer class="footer">
<!-- 页脚内容 -->
</footer>
这些方法可以确保页脚始终保持在页面最底部,无论页面内容的高度如何变化。在实际开发中,可以根据具体需求选择合适的方法来实现。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云