css固定div头部 滚动条滚动内容
页面布局，固定头部，滚动下方内容
实际场景
在制作页面的时候，经常会遇到要这样的情况：整个页面，整体分三大模块，头部固定，内容区域，左边固定，右边可以滚动。
最终想要的效果
案例源码
<!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头部 滚动条滚动内容的更多相关文章
- css固定div头部不随滚动条滚动
给div加浮动: position:fixed; 固定宽度,高度,距离头部,左部为0:width: 99%; height: 80px; top:0; left: 0;
- 设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
- css里设置一个div在顶部固定,不随滚动条滚动而滚动
<div style="border:1px solid red;position:fixed;top:0px;float:inherit;width:100%">删除 ...
- 关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）
今天我做了一个带有滚动条,底部有两个按钮的div. 当我拖动滚动条到底部, 按钮没有显示出来. 我看了看我的样式设置,是这样的: /* 内容样式 */ #contentPartDiv{ posit ...
- 纯css，div隐藏滚动条，保留鼠标滚动效果。
示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...
- jQuery仿百度帖吧头部固定不随滚动条滚动效果
<style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...
- 让DIV随滚动条滚动
$(window).scroll(function(event){ //JQ监听滚动条 $('DIV').css("top", $(window).scrollTop ...
随机推荐
- css 常见属性
字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 font-style: obliqu ...
- 10.2 Vue 环境安装
Vue 环境安装 环境准备 nodejs 下载安装 https://nodejs.org/en/ 查看下载版本 C:\>node -v v7.6.0 C:\>npm -v 4.1.2 ...
- Lua语法基础（二）
1. 函数 1.1 函数声明 默认为全局 局部函数使用local关键字声明 1.2 参数 ...等同于Python中*args三个点表示可变参数 1.3 获取参数长度的两种方式 (1)将传入的参数.. ...
- SP687 REPEATS - Repeats
给定字符串,求重复次数最多的连续重复子串. 题目很简单,被细节坑惨了... 前置的一个推论:请看这里. #include <bits/stdc++.h> using namespace s ...
- redis源码解析(1)：redisObject对象说明
Redis在实现键值对数据库时,并没有直接使用数据结构,而是基于已有的数据结构创建了一个对象系统,每种对象至少包含一种数据结构. redis3.0 中对象结构: typedef struct redi ...
- Pandas系列（二）- DataFrame数据框
一.初识DataFrame dataFrame 是一个带有索引的二维数据结构,每列可以有自己的名字,并且可以有不同的数据类型.你可以把它想象成一个 excel 表格或者数据库中的一张表DataFram ...
- CMDB服务器管理系统【s5day88】：采集资产之Agent、SSH和Salt模式讲解
在对获取资产信息时,简述有四种方案. 1.Agent (基于shell命令实现) 原理图 Agent方式,可以将服务器上面的Agent程序作定时任务,定时将资产信息提交到指定API录入数据库 优点: ...
- Docker：跨主机容器间通信之overlay [十五]
一.配置overlay类型网络准备工作 1.在luoahong3主机上 docker run -d -p 8500:8500 -h consul --name consul progrium/cons ...
- DirectX11 With Windows SDK--12 深度/模板状态、平面镜反射绘制
前言 深度/模板测试使用的是与后备缓冲区同等分辨率大小的缓冲区,每个元素的一部分连续位用于深度测试,其余的则用作模板测试.两个测试的目的都是为了能够根据深度/模板状态需求的设置来选择需要绘制的像素. ...
- Java之final关键字详解
1. 修饰类 当用final去修饰一个类的时候,表示这个类不能被继承. 注意: a. 被final修饰的类,final类中的成员变量可以根据自己的实际需要设计为fianl. b. final类中的成员 ...