<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. 对qa 工作的理解

    主要职责 进行检查,包括组织级和项目级工作内容,其中组织级和项目级里包括[过程]和[资产]两项内容. 跟进不符合项,和项目经理等干系人沟通,直到不符合项问题得到解决 识别过程改进的内容,反馈给EPG. ...

  2. wpf 自定义Messagebox时,对话框显示不居中问题

    在自定义Messagebox(有属性Window.SizeToContent="WidthAndHeight")时,对话框显示不居中,经过尝试,应设置如下: msgBox.Wind ...

  3. CAD中如何将图形对象转换为三维实体?

    有些小伙伴在CAD绘制完图纸后,想要将图纸中的某些图形对象转换成三维实体,但却不知道该如何操作,其实很简单,本节CAD绘图教程就和小编一起来了解一下浩辰CAD软件中将符合条件的对象转换为三维实体的相关 ...

  4. k8s_namespace

    namespace 可以认为namespaces是kubernetes集群中的虚拟化集群.在Kubernetes集群可以拥有多个命名空间,它们在逻辑上彼此隔离. 多数的Kubernetes中的集群默认 ...

  5. simlink物体仿真中连接scope

    该模块用于连接scope和multibody仿真中物理模型的输出值.

  6. ssh 免密访问

    首先配置三台机器的hosts文件 填写需要配置的三台主机ip,然后命名,这里我写的时 t1 t2 t3 三台机器上都要配置hosts文件,要配置一样. 三台机器改完后保存退出 ping一下刚才配置的三 ...

  7. 百度云+Zotero进行知识管理的方法

    首先,要在zotero的首选项的文件与文件夹里去自定义你的zotero文件夹,这个文件夹就是你的zotero软件的文档存储编辑的文件夹,本来默认是在电脑用户里自动创建的,比如hp/user/zoter ...

  8. Navie UI

    开发文档 一个 Vue 3 组件库, 它比较完整,主题可调,用 TypeScript 写的,快.

  9. K8s试验环境搭建(一)

    一.kubernetes简介 1.什么是kubernetes? kubernetes是google公司用go语言开发的一套容器编排系统,简称k8s:它主要用于容器编排:所谓容器编排简单的我们可以理解为 ...

  10. 图片转成gif 变成base64

    html2canvas   截屏的插件 http://jnordberg.github.io/gif.js/  GIF.js官网 <script src='https://imgss.githu ...