<div class="show-box">
            <div class="show-top">
                <span>头部</span>
            </div>
            <div class="show-content">
            XXXXXX
            </div>
   </div>
<!-- #CSS -->
.show-box{
    overflow: hidden;
    height: 100%;
}
.show-top{
    height: 30px;
    width: 100%;
}
.show-content{
    height: calc(100% - 30px);
    overflow: auto;
    position: relative;
}

  

vue-固定头部-内容可滚动的更多相关文章

  1. 移动端固定头部和固定左边第一列的实现方案(Vue中实现demo)

    最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度, ...

  2. table头部、尾部固定;中间内容定高自适应滚动

    table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...

  3. Midnight.js – 实现奇妙的固定头部切换效果

    Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...

  4. 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  5. margin+absolute布局:右栏固定主内容自适应 demo

    margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...

  6. vue.js主要内容

    vue的主要内容 1.了解vue 2.vue开发环境的搭建和脚手架工具的使用 3.vue具体的指令和项目实战 1.了解vue 1.具备基础:html.css.js,模块化概念.ES6语法(简单即可) ...

  7. React Native商城项目实战12 - 首页头部内容

    1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图. 2.HomeTopView.js /** * 首页头部内容 */ import React, ...

  8. React Native商城项目实战11 - 个人中心头部内容

    1.创建MineHeaderView.js /** * 个人中心头部内容 */ import React, { Component } from 'react'; import { AppRegist ...

  9. Css 设置固定表格头部,内容可滚动

      效果图:

  10. table 表格固定表头和第一列、内容可滚动

    整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

随机推荐

  1. smartgit 安装

    下载 https://www.syntevo.com/smartgit/download/ 破解删掉

  2. clickhouse不喜欢sql末尾分号

    今天用python连clickhouse查数据,sql语句末尾加了分号,始终报错 Code: 62, e.displayText() = DB::Exception: Syntax error 删掉分 ...

  3. 火爆全球的“饺子皮”3D手办原来是这样做的!关键时刻少不了远程控制软件!

    2022年卡塔尔世界杯的吉祥物最近在全球火出圈了,并且喜提中国网友给予的爱称"饺子皮"."馄饨皮"(官方名字:拉伊卜,意为"技艺高超的球员" ...

  4. JMM(Java内存模型)笔记

    JMM介绍1.什么是JMM?2.JMM的三大特性:1.原子性2.可见性3.有序性3.关于同步的规定:4.解释说明JMM中的八种操作:1.什么是JMM?​ JMM 是Java内存模型( Java Mem ...

  5. 【C++复习】5.7 多文件结构与编译预处理命令

    1.C++项目结构 C++程序的一般组织架构 类声明文件(.h文件) 类实现文件(.cpp文件) 类的使用文件(main()所在的.cpp文件) 用工程组合各文件 2.编译链接 编译链接过程 3.外部 ...

  6. Ribbon负载均衡调用

    pring cloud Ribbon 是基于Netfilix Ribbon 实现一套 客户端 负载均衡工具. 简单的说, Ribbon 是 Netflix 发布开源项目. 主要是提供客户端软件负载均衡 ...

  7. I3D论文总结

    最近看了李沐讲论文系列朱毅老师讲的I3D论文精读(视频,笔记),这里记录一下. 1.针对的问题 1.之前的视频数据集都太小,导致大多数流行的动作识别基准都很小,且即使不同模型效果有好有坏也难以区分. ...

  8. C++实现双向链表的相关操作代码

    #include<iostream>#include<cstdlib>using namespace std;#define OK 1#define ERROR 0#defin ...

  9. QTableWidget CSS样式

    QTableWidget { border:1px solid rgb(170, 170, 127); border-radius:3px; } QScrollBar::handle { backgr ...

  10. git当前分支修改文件不提交切换另一个分支(git stash)

    出发前先讲故事:项目正在test分支更新版本我们疯狂的写bug,突然没更新前的版本出bug了(意料之中),此时呢我们要切换到master分支去改bug.此时此刻我test分支上修改的文件还不想提交,但 ...