vue3+vant实现移动端响应式布局（内容区上下滑动，按钮固定在底部）

行咘行啊细狗

于 2024-11-21 17:15:52 发布

阅读量379

点赞数 3

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_62626838/article/details/143950505

版权

<template>
<van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onClickLeft" />
<div class="root_box">
  <div class="scroll">
      <div class="div_spanText">
          <span class="leb_text">发布人:</span>
          <span class="text_cont">{{ createPerson }}</span>
      </div>
      <van-divider />
  </div>
</div>
<div class="div_box2" >
   <van-button type="default" class="btn_foot2" @click="setBack">提交</van-button>
</div>
</template>


.root_box {
  height: calc(100vh - 52px); /* 减去头部和底部的高度 */
  overflow-y: auto;
  background-color: #f2f6f9;
  padding: 12px 15px 0px 15px;
}
.scroll {
  background: #ffffff;
  border-radius: 6px;
  height: 80%;
  overflow-y: auto;
}
.div_box2 {
  box-sizing: border-box;
  background: #ffffff;
  height: 52px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  position: fixed;//使用固定定位
  bottom: 0px;
}