因为用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. 读取word到二进制，再转成word

    static void Main(string[] args) { try { var strParams = new Dictionary<string, string>(); stri ...

  2. MyBatis传入集合 list 数组 map参数的写法

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主要有item,index,collection,open,separator,close.ite ...

  3. C和指针第13章第4题

    题目:编写一个函数,它用于对一个任何类型的数组进行排序. 算法核心代码sort函数实现 /** 功能说明:sort函数可以对不同类型的数据进行排序 参数: 1.一个指向需要排序的数组的第一个值的指针. ...

  4. Java 的双重分发与 Visitor 模式

    双重分发(Double Dispatch) 什么是双重分发? 谈起面向对象的程序设计时,常说起的面向对象的「多态」,其中关于多态,经常有一个说法是「父类引用指向子类对象」. 这种父类的引用指向子类对象 ...

  5. listen的参数backlog的意义

    实验环境:Ubuntu16.04,内核版本:4.4.0-59-generic   根据man listen得到的解释如下:   backlog参数定义了存放pending状态(挂起.护着搁置)的连接的 ...

  6. idea 开启 problems自动代码检查

    勾上此处 会自动出现 疑问 可能需要装 problems view插件

  7. Python实例获取mp3文件的tag信息

    下面利用一个python的实例程序,来学习python.这个程序的目的就是分析出所有MP3文件的Tag信息并输出. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  8. ORA-12541:TNS:无监听程序 配置Oracle Myeclipse无法连接上 花费一天时间解决掉的

    背景:自己机子做oracle服务器,其他机子可以ping得通我的机子,但是jdbc就是连不上,后来用plsql连出现无监听程序.... 我昨天重新安装Oracle后,用PL/SQL Developer ...

  9. IOS 地图移动中心点获取

    MKMap显示地图后,如果用户移动了地图,自己定义的数据就需要刷新了,所以这个时候,中心点的经纬度就比较重要了. 本文演示如何获取经纬度 在MKMapViewDelegate里有个方法 - (void ...

  10. 操作Excel文件--java

    java操作Excel首先要导入 JExcelAPI JExcelAPI是一套纯粹使用JAVA开发出来的Excel表格操作组件,本身并不与特定的操作系统进行绑定,可以在不同的操作系统上对Excel文件 ...