position: absolute; bottom: 0;
使用这种方法需要在其父级元素上添加下面的样式:
position: relative; height: 100vh; /* 100vh指viewport的高度,也可以使用具体的像素值 */
这样设置的效果就是让该
元素相对于其父元素进行定位,在底部位置(bottom: 0)固定。
除了position:absolute还可以使用flex布局的方法实现:
display: flex; flex-direction: column; justify-content: flex-end;
将该方式应用于其父级元素上,就可以让该
元素不管在父元素内部占据多少空间,始终保持在底部。
最后再提一种方法——使用margin-top: auto。设置该属性之后,
元素会自动将其上面的空间都占据,而底部留出空隙,从而实现固定在底部。
margin-top: auto;
总之,以上几种方法都可以让CSS中的
元素始终保持在最底部,具体采用哪种方法要看你的需要以及具体的页面布局。