CSS中實現div固定底部的方法在很多情況下都是必備的技巧,下面將介紹一些實現的方法。
首先,在html的body部分,需要添加一個包含固定高度的塊元素,例如:
<div class="container">
</div>
接著,在CSS文件中,需要設置這個塊元素的高度,以及設置另一個相對定位的塊元素固定在容器底部,例如:
body {
margin: 0;
padding: 0;
}
.container {
height: 500px;
position: relative;
}
.fixed-bottom {
position: absolute;
bottom: 0;
}
以上代碼中,.container設置了高度為500px,并設置其position屬性為relative。接著,.fixed-bottom設置了position屬性為absolute,并將其bottom值設置為0,就可以固定在容器底部。
除此之外,還有另一種方法可以實現div固定底部,那就是使用flex布局。以上述的代碼為例:
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer {
height: 50px;
}
通過設置container為flex布局,并將其flex-direction屬性設置為column,content設置flex:1,就可以自適應高度。再將.footer的高度設為50px,就可以實現div的固定底部了。
總的來說,固定底部的方法有很多,上述只是其中的兩種。需要根據實際情況來選擇最合適的方式。
上一篇css div 懸浮
下一篇css3光照效果