CSS实现footer“吸底”效果的完整攻略如下：
1. HTML结构
首先需要在HTML中添加footer元素，通常情况下，整个HTML结构的最外层会使用一个div包裹，这个div我们称之为容器，例如：
<div class="container">
...
<footer>这里是 footer</footer>
</div>
2. CSS样式
为了实现吸底效果，我们需要使用CSS来设置footer的样式。我们需要使用到flex布局，需要对容器添加以下样式：
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
其中，min-height: 100vh;表示容器的最小高度为100vh（即视窗的高度），这样就可以保证在内容不足时，footer仍旧吸底。
接下来，对footer添加以下样式：
footer {
margin-top: auto;
}
margin-top: auto;表示将footer的顶部外边距设置为自动，这样就可以使得footer相对于容器底部吸底。
示例1
<div class="container">
<main>这里是内容</main>
<footer>这里是 footer</footer>
</div>
<style>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
</style>
示例2
<body>
<div class="wrapper">
<main>这里是内容</main>
<footer>这里是 footer</footer>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
flex-grow: 1;
}
footer {
margin-top: auto;
}
</style>
在示例2中，我们将容器设置为了body，而不是普通的div容器，这样就能在内容少时也能让footer吸底。另外，我们使用了flex-grow: 1;将wrapper元素的flex-grow属性设置为1，使其充满整个父元素，这样当内容较少时也能保证footer吸底。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS实现footer“吸底”效果 - Python技术站
微信扫一扫 
支付宝扫一扫 