因为用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. jira 跟工时有关的配置文件

    ./atlassian-jira/WEB-INF/classes/jpm.xml 关建字:jira.timetracking.hours.per.day <property> <ke ...

  2. [Windows Azure] Learn SQL Reporting on Windows Azure (9-Step Tutorial)

    Learn SQL Reporting on Windows Azure (9-Step Tutorial) 4 out of 4 rated this helpful - Rate this top ...

  3. c++11实现c++14的optional

    c++14中将包含一个std::optional类,它的功能和用法和boost的optional类似.optional<T>内部存储空间可能存储了T类型的值也可能没有存储T类型的值,只有当 ...

  4. position: absolute;

    .recent-contac { position: absolute; overflow: auto; overflow-x: hidden; top: -2px; bottom: 0; -webk ...

  5. Lintcode: Majority Number II 解题报告

    Majority Number II 原题链接: http://lintcode.com/en/problem/majority-number-ii/# Given an array of integ ...

  6. 设计模式之策略模式（iOS开发，代码用Objective-C展示）

    在实际开发过程中,app需求都是由产品那边给出,往往是他给出第一版功能,我们写好代码后,会相应的给出第二版.第三版功能,而这些功能是在实际使用中,根据用户需求而不断增加的.如果在编码之初,我们并未认识 ...

  7. zmap blacklist

    # From IANA IPv4 Special-Purpose Address Registry# http://www.iana.org/assignments/iana-ipv4-special ...

  8. Delphi中的三目运算函数有哪些？(XE10.2+WIN764)

    相关资料:https://www.cnblogs.com/rogge7/p/6078903.html 问题现象:在做一个判断时突然想到了C++的三目运算,就在想Delphi中一共有几个? 问题处理: ...

  9. 基于HTML5功能强大的滑块幻灯片

    分享一款功能强大的HTML5滑块幻灯片.这是一款基于jQuery+HTML5实现的图片切换幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cla ...

  10. TaskWarrior windows版制作

    TaskWarrior TaskWarrior是一款优秀的命令行todo神器,具体用法可以看之前我写的介绍. 但是需要cygiwn环境,而我一直在用cmder的完整包,不想再安装一个cygwin了,于 ...