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

实际场景

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

最终想要的效果

案例源码

<!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. Tensorflow调试Bug解决办法记录

    1.ascii' codec can't encode characters in position 0-4: ordinal not in range(128) 原因是python2.X默认的编码是 ...

  2. 如何批量修改网页 更新网站 一键保存 windows查看和排序

    批量打开需要修改的网页,一键保存:一个网站会由很多网页组成,当需要大量更新的时候,如果一个个进行打开修改,效率会很低,内容修改不多,且容易修改的时候,可以用editplus这种小编辑软件批量打开,批量 ...

  3. MySQL字符串进行加减乘除的运算

    原文链接:https://www.jianshu.com/p/2ab2c0dc3cb5 在mysql当中,字符串类型间进行加减乘除运算的时候,会截取字符串以数字开头的那一部分数字进行运算,如果字符串前 ...

  4. python提取浏览器Cookie

    在用浏览器进行网页访问时,会向网页所在的服务器发送http协议的GET或者POST等请求,在请求中除了指定所请求的方法以及URI之外,后面还跟随着一段Request Header.Request He ...

  5. 【数学建模】day14-建立GM(1,1)预测评估模型应用

    学习建立GM(1,1)灰色预测评估模型,解决实际问题: SARS疫情对某些经济指标的影响问题 一.问题的提出 2003 年的 SARS 疫情对中国部分行业的经济发展产生了一定影响,特别是对部分 疫情较 ...

  6. MT【318】分式不等式双代换

    已知$a,b>0$且$\dfrac{1}{a}+\dfrac{1}{b}=\dfrac{2}{3}$,求$\dfrac{1}{a-1}+\dfrac{4}{b-1}$的最小值. 解:令$m=\d ...

  7. JS获取字符串实际长度(包含汉字)的简单方法

    方法一: var jmz = {}; jmz.GetLength = function(str) { ///<summary>获得字符串实际长度,中文2,英文1</summary&g ...

  8. PKUWC2019爆0记

    PKUWC2019爆0记 访问量该骗的还是要骗. 1.20 坐了一天的高铁到jz了,热的一批 1.21 上午开营仪式 下午day1 打开发现有个地主斗 然后开T1 出题人你™搞笑吧放一道sb都能切的题 ...

  9. Java String相关

    一.String类的常用方法 1. int indexOf(String s) 字符串查找 2. int lastIndexOf(String str) 3. char charAt(int inde ...

  10. Regularity criteria for NSE 4: $\p_3u$

    In [Zhang, Zujin. An improved regularity criterion for the Navier–Stokes equations in terms of one d ...