怎么只用css实现按钮一直在页面的最底部

html-css07

怎么只用css实现按钮一直在页面的最底部,第1张

要实现的效果:

如果上面元素较少,提交按钮在屏幕底部,如果上面元素较多,接近一屏,或者超过一屏,按钮随之下移。

需要以下几点:

如果不写第三条,在某种情况下会有问题。

当list总条数接近屏幕底部的时候,列表会被按钮挡住:

完整demo:

①用弹性布局flex, justify-content:space-between

②固定外面的宽100% 行高固定,把里面分成5等份每个占20%(设置居中 ),用浮动排列 然后里面每个图标放在刚刚分的5个盒子里 ,设置宽度100%,也可以达到你想要的这种样式。

目前介绍一下css写法,固定在浏览器的下边的<style>

button{position: fixedleft: 50%bottom: 0}

body{height: 3000px}

</style>

<button>aaaa</button>