H5页面头部吸顶,底部吸底,中间自适应滚动布局

博客展示了某种效果,并给出了相关代码,涉及CSS和Vue技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果如下:
在这里插入图片描述

代码如下:

<template>
      <div class="home">
        <div class="title">{{ title }}</div>
        <div class="content">
          <ul>
            <li>1.这是内容,这是内容……</li>
            <li>2.这是内容,这是内容……</li>
            <li>3.这是内容,这是内容……</li>
            <li>4.这是内容,这是内容……</li>
            <li>5.这是内容,这是内容……</li>
            <li>6.这是内容,这是内容……</li>
            <li>7.这是内容,这是内容……</li>
            <li>8.这是内容,这是内容……</li>
            <li>9.这是内容,这是内容……</li>
          </ul>
        </div>
        <div class="footer">
          <div class="btn">
            <el-button @click="handleSearch"> 取消 </el-button>
            <el-button type="primary" @click="handleSearch"> 确定 </el-button>
          </div>
        </div>
      </div>
</template>

<script>
export default {
  data () {
    return {
      title: '联报推荐'
    }
  },
  methods: {
    init () {
      this.drawer = true
    },
    handleClose () {
      this.drawer = false
    }
  }
}
</script>


<style lang="less" scoped>
  .home {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .title {
    padding-left: 24px;
    height: 56px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(33, 40, 49, 1);
    line-height: 56px;
    border-bottom: 1px solid rgba(233, 234, 237, 1);
  }

  .footer {
    border-top: 1px solid rgba(233, 234, 237, 1);
    height: 56px;
    .btn {
      margin: 12px 24px 0 0;
      justify-content: flex-end;
      display: flex;
    }
  }

  .content {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: scroll;
    ul {
      li {
        height: 300px;
      }
    }
  }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值