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

最新推荐文章于 2024-06-27 14:17:33 发布
最新推荐文章于 2024-06-27 14:17:33 发布
阅读量1.2k 收藏 4
点赞数 4
分类专栏： web前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50061893/article/details/126719046
版权

文章目录

前言

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

一、需求？

在这里插入图片描述

二、实现

1.使用fiexd

这时候我们一般都会给按钮的盒子设置fiexd
在这里插入图片描述
在这里插入图片描述
但是仅仅是这样设置会挡住内容的部分内容
在这里插入图片描述

2.解决办法

通过给父盒子设置一个padding-bottom,高度为按钮盒子的高度,再给按钮盒子设置一个和主题相符合的背景颜色,可以解决此问题
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

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

冲动消费
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
跨浏览器的实践:position:fixed 层的固定定位
10-30
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
css-移动端解决底部fixed定位，挡住一部分内容
qq_32838979的博客
01-03 1万+
移动端底部内容fixed定位挡住部分内容 在开发移动端页面时，经常出现的一种布局是在浏览器底部固定一个盒子，设置固定定位fixed，但是会出现这个固定定位的盒子压住上文的内容的情况，详细看下图： 蓝色的底部固定栏挡住了部分产品的内容。 这里我的底部固定栏的高度设置为8%，代码如下： <!-- html部分--> <div class="main"> <img src="1.jpeg" alt="" class="image"> </div> <
css 定位失效 fixed 定位屏幕底部不起效
最新发布
Edwin_jade的博客
06-27 152
css fixed 定位失效
html 按钮吸底,VUE实现吸底按钮
weixin_39910043的博客
07-01 762
本文实例为大家分享了VUE实现吸底按钮的具体代码，供大家参考，具体内容如下{{ item }}吸底按钮export default {name: 'test',data() {return {headerFixed: false,}},mounted() {window.addEventListener('scroll', this.handleScroll)},destroyed() {wind...
position: fixed；吸底按钮以及吸底按钮挡住内容解决办法
前端-卡布达的博客
10-07 1295
但是有的时候，这个吸底按钮可能会挡住内容，那么这个时候可以通过对其最外层的父盒子，或者自己套一个父盒子设置 padding-bottom 属性，再调整 padding-bottom 属性的值到合适位置就OK了。在开发中，吸底或者吸顶按钮很常见，都是通过设置position: fixed，然后控制bottom的距离来实现。
html 按钮吸底,CSS实现footer“吸底”效果
weixin_39669701的博客
07-01 1511
我们经常或琐过系读围就网元维时一钮加近者碎提列使会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后，护据一求相子结这有两种理解：一是如算上处定面一这我作问汇u应色会进灯样近无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是功一新说讲为其年次供。发了架人据模...
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
微信小程序弹出层，右上角关闭按钮
07-14
微信小程序的弹出层设计通常包括一个可点击的按钮来触发弹出，以及在弹出层右上角设置一个关闭按钮，允许用户方便地关闭该层。本篇文章将深入探讨如何实现这一功能，并分享相关的知识点。 首先，我们需要了解微信小...
登陆页面，解决了因为虚拟键盘的弹起对button的遮挡，
02-04
3. **固定底部元素**：另一种解决方案是将重要的按钮（如登录按钮）设置为固定在屏幕底部，即使键盘弹出也不会被覆盖。这通常通过CSS的`position: fixed`属性实现，或者在移动平台上使用相应的API。 4. **键盘关闭...
ajax分页查询+Div透明遮盖
05-11
1. **创建Div**：在HTML中创建一个Div元素，并设置其CSS样式为全屏大小，设置合适的透明度（如`opacity: 0.5`），并设置其定位为固定（`position: fixed`）以覆盖整个页面。 2. **隐藏/显示**：默认情况下，这个Div...
微信小程序学习之路——按钮吸底效果
机智的奎哥的博客
07-28 2151
position:fixed;// 使按钮固定于可视窗口的底部 bottom:0; left:0; right:0; height:44px;// 设置固定高度
CSS实现footer“吸底”效果
12-13
我们经常会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解： 一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。 二是当内容区的内容较少时，页脚区不是随着内容区排布，而是始终显示在屏幕的最下方；当内容区的内容较多时，页脚能随着文档流撑开，始终显示在页面的最底部。   谈到“吸底”效果的实现，大家可能较多了解到的是sticky-footer布局，但这个方式大多是用来解决第二种情况的实现。本文将采用以下的三种方案来分别来实现以上这两种效果，并简单实现的原理以及其的适用情况。 容器（wrapper）
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 2032
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
当页面有position:fixed的悬浮菜单时，如何调整锚定位的时候不被悬浮菜单挡住？
n1z1lam的专栏
04-24 4662
function locateAt(e){ e = document.getElementById(e);/*以id命名的锚点*/ y = e.offsetTop; while(e=e.offsetParent){ y += e.offsetTop;} y-=65;/*悬浮菜单的高度*/ window.scrollTo(0,y); }
css 固定按钮到页面顶部或者底部的实现方式
全栈攻略
11-23 3232
要将按钮固定到顶部或底部，可以使用CSS的定位属性来实现。下面是一种常用的方法：创建一个包含按钮的HTML元素，例如一个元素。确保给它添加一个唯一的id，以便在CSS中进行定位。使用CSS来设置按钮的样式和位置。以下示例将按钮固定在页面的右下角。在这个例子中，将按钮的位置设置为相对于浏览器窗口固定，而不受页面滚动的影响。bottom和right属性确定按钮距离底部和右边缘的距离。如果你想将按钮固定在顶部而不是底部，只需将bottom属性改为top属性即可。
小程序之 吸底按钮的适配
gyueh的博客
03-24 981
要求： 1.按钮始终居底显示 2.吸底按钮区能适配各类手机 wxml部分代码如下： <view class="bottom" > <button>按钮</button> </view> wxss部分代码如下： .bottom { padding-top: 20rpx; padding-bottom: calc(70rpx + env(safe-area-inset-bottom));//适配 padding-bottom: calc(7
html 按钮吸底,在微信小程序中有关吸底按钮适配iPhone X（详细教程）
weixin_35501678的博客
07-01 593
这篇文章主要介绍了微信小程序中吸底按钮适配iPhone X方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下随着第二三批iPhone X的陆续到货，身边的土豪们纷纷用了起来，因为iPhone X的齐刘海导致的适配问题很多，所以这群土豪更沉浸在各种找bug中，不出所料，豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方，主要是商品详情页和购物车的吸底按钮栏，会与 Home Indicator ...
【微信小程序-uniapp】CustomButton 自定义常用吸底按钮组件
Komorebi_00的博客
07-17 827
自定义常用吸底按钮组件和常用样式，适用于uniapp小程序
1.解决使用 position: fixed；时内容被覆盖；2.vue2消除滑动条
m0_72686628的博客
06-22 1360
1.使用 position: fixed;固定定位时内容还是会被覆盖，就可以使用z-index增加层级（仅能在定位元素上奏效）2.第一步npm install less less-loader --save。第二步在App.vue中。
解决CSS position:fixed 兼容问题
05-30
在不同浏览器中，`position: fixed` 的表现可能会有所不同，这可能会导致兼容性问题。以下是一些常见的解决方法： 1. 使用`position: absolute`替代`position: fixed`，并将父元素的`position`属性设置为`relative`。这个方法在某些情况下可以解决兼容性问题，但是可能会导致布局方面的问题。 2. 使用 JavaScript 来模拟 `position: fixed`。这种方法可以确保在所有浏览器中表现一致，但是可能会增加页面的加载时间，并且需要编写更多的代码。 3. 使用 CSS Hack。这种方法不是最优的选择，但是在某些情况下可能是必要的。例如，您可以使用以下 CSS 代码来针对不同的浏览器： ``` /* Firefox */ @-moz-document url-prefix() { .fixed-element { position: absolute; position: fixed; } } /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { .fixed-element { position: absolute; position: fixed; } } /* Internet Explorer */ @media \0screen { .fixed-element { position: absolute; position: fixed; } } ``` 总之，为了获得最佳的兼容性，最好避免使用 `position: fixed`，或者使用 JavaScript 来模拟它。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值