position: fixed;设置吸底按钮.挡住内容,问题解决办法

文章目录

  • 前言
  • 一、需求?
  • 二、实现
    • 1.使用fiexd
    • 2.解决办法
  • 总结


前言

我们常常会有这种需求,提交按钮始终保持在手机底部。

一、需求?

position: fixed;设置吸底按钮.挡住内容,问题解决办法_第1张图片

二、实现

1.使用fiexd

这时候我们一般都会给按钮的盒子设置fiexd
position: fixed;设置吸底按钮.挡住内容,问题解决办法_第2张图片
position: fixed;设置吸底按钮.挡住内容,问题解决办法_第3张图片
但是仅仅是这样设置会挡住内容的部分内容
position: fixed;设置吸底按钮.挡住内容,问题解决办法_第4张图片

2.解决办法

通过给父盒子设置一个padding-bottom,高度为按钮盒子的高度,再给按钮盒子设置一个和主题相符合的背景颜色,可以解决此问题
在这里插入图片描述
position: fixed;设置吸底按钮.挡住内容,问题解决办法_第5张图片
position: fixed;设置吸底按钮.挡住内容,问题解决办法_第6张图片

总结

通过position: fixed搭配父盒子padding-bottom就可以做出完美的按钮吸底效果了。如果不加padding-bottom容易挡住内容的部分

你可能感兴趣的:(web前端,html,css,前端)