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

实际场景

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

最终想要的效果

案例源码

<!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. BZOJ2527[Poi2011]Meteors——整体二分+树状数组

    题目描述 Byteotian Interstellar Union (BIU) has recently discovered a new planet in a nearby galaxy. The ...

  2. D. Maximum Diameter Graph 贪心+图论+模拟

    题意:给出n个点的度数列 上限(实际点可以小于该度数列)问可以构造简单路最大长度是多少(n个点要连通 不能有平行边.重边) 思路:直接构造一条长链  先把度数为1的点 和度数大于1的点分开  先把度数 ...

  3. 第十八节、基于传统图像处理的目标检测与识别(HOG+SVM附代码)

    其实在深度学习中我们已经介绍了目标检测和目标识别的概念.为了照顾一些没有学过深度学习的童鞋,这里我重新说明一次:目标检测是用来确定图像上某个区域是否有我们要识别的对象,目标识别是用来判断图片上这个对象 ...

  4. (二分查找 拓展) leetcode278. First Bad Version

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  5. vue 自定义marquee无缝滚动组件

    先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...

  6. 四大解析器（BeautifulSoup、PyQuery、lxml、正则）性能比较

    用标题中的四种方式解析网页,比较其解析速度.当然比较结果数值与电脑配置,python版本都有关系,但总体差别不会很大. 下面是我的结果,lxml xpath最快,bs4最慢 ==== Python v ...

  7. Redis配置主从复制

    Redis配置主从复制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.操作环境介绍 1>.操作系统环境 [root@node101.yinzhengjie.org.cn ...

  8. [再寄小读者之数学篇](2014-06-23 积分不等式 [中国科学技术大学2013年高等数学B 考研试题])

    设 $f(x)$ 在 $[a,b]$ 上一阶连续可导, $f(a)=0$. 证明: $$\bex \int_a^b f^2(x)\rd x\leq \cfrac{(b-a)^2}{2}\int_a^b ...

  9. 7、Servlet会话跟踪

    一.会话跟踪: 不管操作多少功能,都是与当前登录用户相关的信息,当前的登录用户始终没有改变,也就是用户名和密码都没有丢失.但HTTP协议是一个无状态的协议,当一个客户向服务器发出请求(request) ...

  10. Contest2156 - 2019-3-7 高一noip基础知识点 测试2 题解版

    传送门 预计得分:100+70+100+50=320 实际得分100+63+77+30=270 Ctrl_C+Ctrl_V时不要粘贴翻译的,直接粘原文, In a single line of the ...