<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. vscode远程连接服务器出现Bad owner or permissions on .ssh/config

    vscode远程连接服务器出现Bad owner or permissions on C:\\Users\USER\.ssh/config 过程试图写入的管道不存在, 原因是vscode的remoto ...

  2. Unity 读取Json文件、创建Json文件

    using System.IO; using UnityEngine; public class ReadJson:MonoBehaviour { public static TestSetting ...

  3. mac Big Sur 打开应用提示,您没有权限来打开应用程序

    终端输入codesign --force --deep --sign - /Applications/{AppName.app}注意{AppName.app} 替换为无法打开的应用程序名,将尝试强制签 ...

  4. Attention:何为注意力机制?

    ​  本文来自公众号"AI大道理" 人类利用有限的注意力资源从大量信息中快速筛选出高价值信息,这是人类在长期进化中形成的一种生存机制,人类视觉注意力机制极大地提高了视觉信息处理的效 ...

  5. 安装最新版cmake

    pip install cmake --upgradewhich cmakeln -s $(which cmake) /usr/local/bin/cmake

  6. idea2023最新激活方式

    激活文件下载https://wwtg.lanzouo.com/iAZ1W0kwkgpe 激活教程https://www.666bear.com/244.html

  7. Rest-Assured:发送PATCH请求:更新Hello-imook(java.lang.IllegalArgumentException: Invalid number of path parameters. Expected 2, was 0. Undefined path parameters are: owner, repo.)

    代码: /*     * 发送PATCH请求:更新Hello-imook     */    @Test    public void test003_PatchMethod() {        S ...

  8. python学习之路---基础概念扩展:变量,表达式,算法,语句,函数,模块,字符串

    对于学过一点编程语言的人,学习python基础知识不难,基本大同小异 本章是根据一本书来学习python的编程(强烈推荐)来记录学习python中的有意思的总结 Python 基础教程(第三版)    ...

  9. 面试题-react

    对react的理解 是什么 React 是一个用于构建用户界面的 JavaScript 库. 能干什么 可以通过组件化的方式构建大型的,快速响应的大型web应用 如何做 声明式 React 使用jsx ...

  10. PyMySQL创建

    title: PyMySQL创建 author: 杨晓东 permalink: PyMySQL创建 date: 2021-10-02 11:27:04 categories: - 投篮 tags: - ...