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

实际场景

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

最终想要的效果

案例源码

<!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. [模板] 数学基础:快速幂/乘/逆元/exGCD/(ex)CRT/(ex)Lucas定理

    方便复制 快速乘/幂 时间复杂度 \(O(\log n)\). ll nmod; //快速乘 ll qmul(ll a,ll b){ ll l=a*(b>>hb)%nmod*(1ll< ...

  2. Eclipse maven hadoop -- java.io.IOException: No FileSystem for scheme: hdfs

    2019-01-10 概述 今天在Windows系统下新安装了Eclipse和maven的环境,想利用Maven构建一个Hadoop程序的,结果却发现程序运行时一直报 “No FileSystem f ...

  3. HTML div 盒子 添加/删除——浮层

    1.clear语法:clear : none | left|right| both 2.clear参数值说明:none : 允许两边都可以有浮动对象both : 不允许有浮动对象left : 不允许左 ...

  4. 使用mysql将手机号、身份证号等字段进行脱敏

    -- 脱敏姓名 UPDATE wb_person_message SET `name`=(if(LENGTH(name)>6,CONCAT(LEFT(name,1), '**' ),CONCAT ...

  5. rest framework 分页，版本

    分页 分页器的引入 from rest_framework.pagination import PageNumberPagination, LimitOffsetPagination, CursorP ...

  6. 【转】 如何重写hashCode()和equals()方法

    转自:http://blog.csdn.net/neosmith/article/details/17068365 hashCode()和equals()方法可以说是Java完全面向对象的一大特色．它 ...

  7. golang与python多线程的并发速度

    一.golang的代码 package main import ( "fmt" "time" ) func Text_goroute(a int, b int) ...

  8. 什么是javabean及其用法（转）

    因工作需要 需要学习jsp方面的知识 这篇博客文章写得比较全面 我记录下: 一.什么是JavaBean JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个 ...

  9. LCA(Tarjan)

    时间复杂度:dfs为O(N),dfs过程中处理所有查询对为O(M),总时间复杂度O(N+M) #include<iostream> #include<cstdio> using ...

  10. h3c mstp的举例

    h3c交换机的图如下: 分别对于SWA,SWB,SWC,SWD,SWE 配置如下: SWA: vlan 10 vlan 20 vlan 30 region-name h3c instance 0 vl ...