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 ...
随机推荐
- Java执行jar总结
1.命令集 1)nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg … ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 ...
- redis - Sentinel 和 cluster
redis哨兵集群 引入 上回说到redis主从同步时,master(主库)如果宕机了怎么解决... 我给出了一个手动解决的办法! 但实际上,如果你配置了Sentinel,它能自动发现master宕机 ...
- HTTP 404 Not Found Error with .woff or .woff2 Font Files
如果是 ERR_ABORTED 404 (Not Found) WOFF2,则有可能是文件不存在
- virtualbox虚拟机使用的是桥接网络无法连接外网
virtualbox虚拟机使用的是桥接网络,获取到的DHCP,无法和外界通信 查看路由表发现有两个默认路由,优先级高的路由指向了,仅主机网络的网关 删除第一个默认路由
- jenkins在windows及linux环境下安装
下载 下载地址: https://jenkins.io/download/ 下载windows和linux通用的war包 jenkins在windows下安装 前提:已经安装jdk.tomcat 将w ...
- hdu 3480 Division(四边形不等式优化)
Problem Description Little D is really interested in the theorem of sets recently. There’s a problem ...
- 从零开始学习微信小程序
1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...
- Vue工具
首先介绍几个概念 webpack: 打包机.它能将我们的html,css,js.png,font进行打包,交给服务器. vue-cli: 用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是 ...
- Django的admin视图的使用
要现在admin.py文件中将你要视图化操作的类进行注册: from django.contrib import admin from api import models # Register you ...
- 前端开发常用 Linux 命令
clear // 清理命令窗口(可简写为cls) exit // 关闭命令窗口 mkdir 文件夹名 // 新建文件夹 cd 文件夹名 // 进入文件夹 cd .. // 返回上一级文件夹目录 rm ...