<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. 关于新手在使用git过程中的基本问题--前端开发篇

    1.首先git是什么? git学名叫做分布式版本控制系统. 它能做啥呢?想一想,你在写项目的时候,尤其是大型的协作项目,往往一个项目会经过很多次修改才上线,在这个过程中,你会写项目1.0版.2.0版诸 ...

  2. :)模型保存为单一个pb文件

    模型保存为单一个pb文件 背景 参考连接: https://www.yuque.com/g/jesse-ztr2k/nkke46/ss4rlv/collaborator/join?token=XUVZ ...

  3. [Oracle19C ASM管理] 安装和配置ASM以及Oracle数据库

    一般设置 关闭防火墙 检查防火墙状态 systemctl status firewalld.service 暂时关闭防火墙,下次启动时防火墙仍随系统启动而启动 systemctl stop firew ...

  4. Jenkins自动化部署(linux环境)---安装篇

    1.安装java yum install java 2.安装Jenkins wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.or ...

  5. PyQt5弹框定时关闭(python)

    PyQt5使用QMessageBox,可以设置在几秒后关闭  (作者使用的python3) info_box = QMessageBox()# 因为没使用这种方式 QMessageBox.inform ...

  6. 【TensorFlow】Tensorflow-GPU 环境搭建教程(附 Windows 版本对应表及 CUDA GPU 计算能力表)

    conda教程(推荐):『Tensorflow GPU Installation Made Easy: Use conda instead of pip [Update-2] | by Harveen ...

  7. R6-1 数字金字塔

    1 void pyramid(int n) 2 { 3 int i, j; 4 5 for(i = 0;i < n;i++){ 6 for(j = 0;j < n - i - 1;j++) ...

  8. 使用HttpClient4.5 使用MultipartEntityBuilder 类发送 multipart/formdata 格式给第三方接口 失败的原因

    1.使用MultipartEntityBuilder的setCharset方法设置 utf-8格式2.在httppost 请求头上 加上Content-Type", "multip ...

  9. json转化 ts定义网页工具

    json转化 ts定义 https://transform.tools/json-to-typescript

  10. 区分CommonJs/ES6 Module/AMD/CMD

    模块加载方式 CommonJs ES6 Module AMD CMD UMD Commonjs和ES6 Module的区别 总结 1.CommonJS CommonJS 是一个项目,其目标是为 Jav ...