css布局: 上下固定，中间内容可滑动

Jara_Wong

于 2024-03-26 09:45:55 发布

阅读量283

点赞数 4

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_43720253/article/details/137034940

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

平时开发经常用到这种竖着的三栏布局，上下固定，中间可滑动。
大概长这样：
在这里插入图片描述
CSS 代码如下：

<template>
  <div class="page">
    <Navbar></Navbar>
    <div class="search-box">
      <van-search
        v-model="searchValue"
        placeholder="请搜索人员姓名/手机号"
        class="van-search"
      />
    </div>
    <div class="search-list"></div>
    <div class="bottom-box">
      <van-button type="primary" block color="#FF5E5E">确认</van-button>
    </div>
  </div>
</template>

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .search-list {
    overflow: auto;
    flex: 1;
  }
  .bottom-box {
    background-color: #fff;
    padding: 12px 16px;
    border-top: 0.5px solid #ededed;
  }
}