底部按钮遮挡内容解决

最新推荐文章于 2024-08-30 11:42:39 发布

十安十里

最新推荐文章于 2024-08-30 11:42:39 发布

阅读量511

点赞数

文章标签： node.js vue.js 前端

本文链接：https://blog.csdn.net/weixin_54447214/article/details/123223995

版权

本文介绍了两种防止底部按钮遮挡内容的解决方案：方法一是通过在内容区域底部添加一个空的div来站位；方法二是给外部最大容器设置padding-bottom。示例代码展示了在Vue中应用方法二的实现，通过设置`padding-bottom: 120rpx`确保输入框不会被底部视图覆盖。

摘要由CSDN通过智能技术生成

app底部按钮遮挡内容解决：

方法一
		在内容最下面添加一个空的div用来站位
方法二
		在外面最大的盒子下添加padding-bottom：xxx


<template>
  <view style="padding-bottom: 120rpx">
    <!-- 方法二 -->
    <view class="heads"> 你是谁啊猪 </view>
    <view class="nextText">
      <view class="one1">123</view>
      <view class="one2">123</view>
      <view class="one3">123</view>
      <view class="one4">
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
        <input type="text" placeholder="one" />
      </view>
    </view>
    <!-- <view style="height: 120rpx"></view>  方法一 -->
    <view class="one5">底部</view>
  </view>
</template>


效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/744ab586937c4bd89a137ff995541a2c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2B5a6JIOWNgemHjA==,size_12,color_FFFFFF,t_70,g_se,x_16)