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

实际场景

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

最终想要的效果

案例源码

<!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. css3 box-shadow阴影(外阴影与外发光)讲解

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  2. 量化交易之下单函数和context对象

    一.下单函数 聚宽设计的函数(如前文所说准确叫法是API)的用法都写在API文档里,位置在聚宽网站导航栏-帮助-API文档 1.order按股数下单 order(security, amount, s ...

  3. Django+Vue打造购物网站(八)

    购物车.订单管理和远程调试 添加商品到购物车 trade/serializers.py from rest_framework import serializers from goods.models ...

  4. 【XSY2843】「地底蔷薇」 NTT什么的 扩展拉格朗日反演

    题目大意 给定集合\(S\),请你求出\(n\)个点的"所有极大点双连通分量的大小都在\(S\)内"的不同简单无向连通图的个数对\(998244353\)取模的结果. \(n\le ...

  5. css布局：左边定宽、右边自适应

    方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...

  6. BSGS及扩展BSGS算法及例题

    \(BSGS(baby-step-giant-step)\)算法是用来解高次同余方程的最小非负整数解的算法,即形如这个的方程: \(a^x\equiv b(mod\ p)\) 其中\(p\)为质数(其 ...

  7. linux device drivers ch02

    ch02.构造和运行模块 模块的构造: #include <linux/init.h> #include <linux/module.h> MODULE_LICENSE(&qu ...

  8. openstack项目【day23】：glance基础

    本节内容 一 什么是glance 二 为何要有glance 三 glance的功能 四 glance的两个版本 五 镜像的数据存放 六 镜像的访问权限 七 镜像及任务的各种状态 八 glance包含的 ...

  9. Linux记录-grafana opentsdb安装

    wget https://dl.grafana.com/oss/release/grafana-6.1.4-1.x86_64.rpm sudo yum localinstall grafana-6.1 ...

  10. ios打包 上架 了解

    苹果开发者中心  https://developer.apple.com/account 上架收费相关了解 https://www.jianshu.com/p/681f00a561ca ios打包 上 ...