前言

大家好今天我要说一下怎么用css的fixed属性来做底部固定工具栏这个东西其实挺有用的主要原因是现在很多网站都用到底部工具栏所以我觉得这个很重要我自己也想学一下这个技术所以我就开始研究这个东西了

底部固定工具栏是啥

换个思路。 底部固定工具栏就是说这个工具栏会一直在屏幕最下面不动不管你页面怎么滚动它都在那里这个功能很实用比如你滑来滑去的时候它还是在那里的不会动的

代码怎么写

现在我来说一下代码怎么写先说说你要写一个简单的html结构出来比如这样，行吧...

然后css的代码大概就是这个样子

这样你就可以看到一个固定在底部的工具栏了

关键点说明：

为提升移动端体验， 可添加以下优化：

使用 CSS 的 position: fixed 可以轻松实现底部固定工具栏，无论页面如何滚动，工具栏始终停留在屏幕底部。

又爱又恨。 fixed 元素会覆盖原有内容， 可在页面主体添加 padding-bottom 预留空间：

或者给主内容区域设置外边距：

使用 position: fixed 将工具栏固定在视窗底部：

先写一个简单的工具栏结构：

移动端优化