<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. js常用代码整理2

    引用js <script type="text/javascript" src="js/jquery-1.11.2.min.js"></scr ...

  2. C# 当页面有很多选择条件时的处理方式

    如下图,用户可能输入很多条件 在后端的处理方式: 使用键值对 private Dictionary<string, string> CreatSearchPara() { Dictiona ...

  3. Java高级助教工作总结

    一.助教工作的具体职责和任务 1.帮助老师在云班课上发布作业 2.解答同学们的问题 3.批改同学们的作业,并了解同学们的学习情况 4.在qq群中发布通知,收集同学们的一些意见 二.助教工作的每周时长和 ...

  4. codeforces 165C Another Problem on Strings 二分or双指针

    题意:给一个01字符串s,找出s包含恰好k个1的连续字串个数 解法: 显然是简单的双指针or二分的题,但由于k=0的存在,使得双指针的边界条件十分难写,所以应该选择二分! #include<bi ...

  5. leetcode-36-有效数独,leetcode-37-求解9*9数独

    #include <iostream> #include <vector> #include <utility> #include <unordered_ma ...

  6. https原理(六)系统分析

    先解决此前的问题: 1 http原理(三)双向实践(curl) need时java 客户端可访问,但没客户端证书:want时有 后来发现,没有给truststore,猜测为,当springboot读到 ...

  7. git将自己分支上忽略已修改但不需要的提交的文件

    一:在idea上把需要提交的文件勾选上提交 二:git stash命令将余下被修改的文件存入(隐藏)暂存区 git stash 三:切换master分支合并上述分支 四:合并后再返回上述分支,git ...

  8. 如何把腾讯地图左边的搜索结果导出成excel里?

    最近,又有朋友让我再写一个 腾讯地图 采集商家的地址,电话信息. 原理应该差不多,我就查阅了下腾讯地图的采集规则,编写了专门针对腾讯地图的采集软件. 界面上和百度地图的采集软件基本类似,但是不用选择区 ...

  9. stream 链式结构 求和

    Double aDouble = Optional.ofNullable(wayfairMonthBill.getPaymentAmountDetailJson()) .filter(StringUt ...

  10. MySQL 5.0版本的安装步骤

    一.MYSQL的安装 1.以管理员的身份运行"mysql_setup.exe" 2.点击"Next" 3.选择"I accept the terms ...