页面布局，固定头部，滚动下方内容

实际场景

在制作页面的时候，经常会遇到要这样的情况：整个页面，整体分三大模块，头部固定，内容区域，左边固定，右边可以滚动。

最终想要的效果

案例源码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>css固定div头部，滚动条滚动内容</title>

  <style type="text/css">

  .headDiv {

    position: fixed;

    /*固定定位*/

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 60px;

    border: 1px solid blue;

  }

  .contentDiv {

    position: fixed;

    /*固定定位*/

    top: 60px;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 1px solid red;

  }

  .content-left {

    position: fixed;

    /*固定定位*/

    top: 60px;

    right: 0;

    bottom: 10px;

    left: 0;

    width: 200px;

    border: 1px solid red;

  }

  .content-right {

    position: absolute;

    /*绝对定位*/

    top: 10px;

    right: 0;

    bottom: 70px;

    left: 210px;

    border: 1px solid #006;/* 使用边框，区分内容*/

    overflow-y: scroll;/*显示y轴滚动条*/

    overflow-x: hidden;/*隐藏x轴滚动条*/

  }

  </style>

</head>

<body>

  <div class="fixedDiv">

    <div class="headDiv">我是头部，我要固定</div>

    <div class="contentDiv">

      <div class="content-left">我是左边left的内容，我要固定</div>

      <div class="content-right">

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

        <div>我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，我要滚动我是右边right的内容，</div>

      </div>

    </div>

</body>

</html>

css固定div头部 滚动条滚动内容的更多相关文章

  1. css固定div头部不随滚动条滚动

    给div加浮动: position:fixed; 固定宽度,高度,距离头部,左部为0:width: 99%; height: 80px; top:0; left: 0;

  2. 设置DIV随滚动条滚动而滚动

    有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...

  4. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  5. css里设置一个div在顶部固定,不随滚动条滚动而滚动

    <div style="border:1px solid red;position:fixed;top:0px;float:inherit;width:100%">删除 ...

  6. 关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）

    今天我做了一个带有滚动条,底部有两个按钮的div.  当我拖动滚动条到底部, 按钮没有显示出来.  我看了看我的样式设置,是这样的: /* 内容样式 */ #contentPartDiv{ posit ...

  7. 纯css，div隐藏滚动条，保留鼠标滚动效果。

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

  8. jQuery仿百度帖吧头部固定不随滚动条滚动效果

    <style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...

  9. 让DIV随滚动条滚动

    $(window).scroll(function(event){        //JQ监听滚动条 $('DIV').css("top", $(window).scrollTop ...

随机推荐

  1. libstdc++.so.6: cannot open shared object file: No such file or directory

    sudo apt-get install lib32stdc++6 sudo apt-get install lib32z1

  2. 2018-2019 ACM-ICPC, Asia East Continent Finals部分题解

    C:显然每p2个数会有一个0循环,其中22 32 52 72的循环会在200个数中出现,找到p2循环的位置就可以知道首位在模p2意义下是多少,并且循环位置几乎是唯一的(对72不满足但可能的位置也很少) ...

  3. shell脚本自动化部署服务

    shell脚本自动化部署 !/bin/bash #export PATH=$PATH:/export/maven/bin run_flag_dir="/data0/shell/deploy_ ...

  4. git 操作命令详解

    git 什么是git 开源的分布式版本控制系统, 用于高效的管理大小项目和文件 代码管理工具 防止代码丢失, 做备份 代码版本管控, 设置节点, 多版本切换 建立分支各自开发, 互不影响, 方便合并 ...

  5. UOJ#310.【UNR #2】黎明前的巧克力（FWT）

    题意 给出 \(n\) 个数 \(\{a_1, \cdots, a_n\}\),从中选出两个互不相交的集合(不能都为空),使得第一个集合与第二个集合内的数的异或和相等,求总方案数 \(\bmod 99 ...

  6. php支持大文件上传

    打开php.ini找到 upload_max_filesize . memory_limit . post_max_size 这三个参数! upload_max_filesize = 2G 是上传最大 ...

  7. (最短路 Floyd) P2910 [USACO08OPEN]寻宝之路Clear And Present Danger 洛谷

    题意翻译 题目描述 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛． 一张藏宝图上说,如果他的路程上经过的小岛依次出现了 ...

  8. vue-cli3.0 gui（一）

    vue-cli3.0 gui 安装: npm i core-js -g:用于JavaScript的模块化标准库. npm i -g @vue/cli:vue的脚手架工具 运行: vue ui:运行vu ...

  9. 【asp.net】asp.net遍历Request的信息

    #需求: 在服务端获取从客户端发送过来的所有数据信息: #方案: 1.服务端代码 public void ProcessRequest(HttpContext context) { //打印所有参数信 ...

  10. ACM-ICPC 2018 徐州赛区网络预赛 J Maze Designer（最大生成树+LCA）

    https://nanti.jisuanke.com/t/31462 题意 一个N*M的矩形,每个格点到其邻近点的边有其权值,需要构建出一个迷宫,使得构建迷宫的边权之和最小,之后Q次查询,每次给出两点 ...