因为用position是脱离文档流的,所以在最上面嘛,

中间用overflow:auto就会出现滚动效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ac-globalnav {
position: absolute;
margin: 0;
left: 0;
top: 0;
width: 100%;
min-width: 1024px;
height: 88px;
max-height: 100px;
background: #333;
background: rgba(0,0,0,0.8);
font-size: 17px;
user-select: none;
}
#web_button {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
min-width: 1024px;
height: 44px;
max-height: 100px;
background: #333;
background: rgba(0,0,0,0.8);
font-size: 17px;
user-select: none;
line-height:44px; } li {
display: inline;
list-style:none;
margin:0 35px 0 35px;
color: #fff;
line-height:58px;
cursor:pointer; } li:hover{
color: red;
<!--想换加入背景色的话, 可以使用background-->
}
ul {float:left; margin-left:18%;} .content{
position: fixed;
left: 0;
right: 0;
padding: 0;
margin: 0;
top: 88px;
bottom: 44px;
overflow: auto;
background: red;
}
</style>
</head>
<body>
<!--top-->
<div>
<div id="ac-globalnav">
<ul>
<li>首页</li>
<li>自学教程</li>
<li>指法表</li>
<li>曲谱</li>
<li>视频作品</li>
<li>资料下载</li>
<li>社区</li>
<li>搜索</li> <li></li>
</ul>
</div> </div> <!--body-->
<div class="content">
<div style="height: 2000px;">
<h3>adf</h3>
<h3>adf</h3>
<h3>adf</h3>
<h3>adf</h3>
<h3>adf</h3>
<h3>adf</h3>
<h3>adf</h3>
</div>
</div> <!--button-->
<div>
<div id = "web_button">
<center>所有权...</center>
</div> </div> </body>
</html>

上下栏固定, 中间滚动的HTML模板的更多相关文章

  1. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  2. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  3. 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  4. 谈一谈手机WebApp的fixed属性(手机上的固定栏)【转】

    1.iphone/android原生app常见结构 似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域.这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的 ...

  5. Qt qml listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 下拉刷新 ...

  6. flex上下固定中间滚动布局

    传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动 ...

  7. wordpress 在linux上配置固定url方法

    wordpress 设置固定url总结 相信好多用wordpress的网友为了提升wordpress对搜索引擎的友好,或者是为了写的博客地址更好记,都会在wordpress的后台设置固定url的方式. ...

  8. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  9. React+Antd+Antd-Img-Crop实现上传固定大小的裁剪头像或者图片(且可控制图片数量)

    见章知著 1024,程序员们节日快乐!本文主要讲述react配合antd以及react-img-crop第三方库实现一个可控的图片上传功能. 运行项目 需要具有node环境 第三方库安装 1.antd ...

随机推荐

  1. 第九章&#183;词典

    第九章·词典 散列:原理 散列是一种赖以高效组织数据并实现相关算法的重要思想. 这样的思想背后的原理却非常直观.简单. 上图是IBM公司和联想公司的服务电话号码,能够看到这样的号码是由数字和字母共同组 ...

  2. 转:GestureDetector: GestureDetector 基本使用

    Gesture在 ViewGroup中使用 GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等. 使用GestureDetector分三步: 1. 定义GestureDete ...

  3. CMD命令下访问Oracle数据库

    1.非集群下 Windows环境下数据库 127.0.0.1 只是个IP代表  实际要输入你要访问的数据库服务器IP地址的 如果数据库服务器不在本机上,需要加上数据库服务器的地址:用户名/密码@IP地 ...

  4. c#,asp.net 开发 app 学习资料整理

    VS2015 Apache Cordova第一个Android和IOS应用 http://www.cnblogs.com/aehyok/p/4116410.html PhoneGap:免费开源的 HT ...

  5. hive内部表、外部表、分区

    hive内部表.外部表.分区 内部表(managed table) 默认创建的是内部表(managed table),存储位置在hive.metastore.warehouse.dir设置,默认位置是 ...

  6. 通过Python的JIRA库操作JIRA

    [本文出自天外归云的博客园] 前提 需要安装jira库: pip install jira 编写脚本 例如,我想统计一下某一jira的备注里是否有如下信息,没有则给予提示: [产品需求文档地址]:ht ...

  7. hdu1102(最小生成树水题)

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...

  8. 基于jQuery功能非常强大的图片裁剪插件

    今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...

  9. python 入门练习

    1.猜拳游戏 import randomimport sys #from random import randintdef guess(): ubuntu = random.randint(0,2)# ...

  10. 前端常用功能记录(二)—datatables表格(转)

    前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是 ...