因为用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. 精通D3.js笔记

    DOM常用属性 innerHTML: 元素标签内部的文本. innerText outerHTML outerText nodeName: 节点名称 parentNode: 父节点 nextSibli ...

  2. 将redis作为windows服务安装

    1,下载redis并解压到一个目录下,然后切换到该目录下,也就是redis-server.exe文件所在的目录 2,在cmd下执行 redis-server --service-install red ...

  3. FFmpeg(11)-基于FFmpeg进行音频重采样(swr_init(), swr_convert())

    一.包含头文件和库文件 修改CMakeLists # swresample add_library(swresample SHARED IMPORTED) set_target_properties( ...

  4. 每日英语：The Benefits of a Sleep Buddy

    Stolen sheets, snoring and hot flashes are just some of the annoyances that lead a quarter of U.S. c ...

  5. 分析jvm线程堆栈

    目录 一.java线程状态 二.使用jstack生成进程dump文件 三.统计dump文件中处于不同状态的线程数量 四.举例分析不同状态的线程 1.分析BLOCKED (on object monit ...

  6. LeetCode: Binary Search Tree Iterator 解题报告

    Binary Search Tree Iterator Implement an iterator over a binary search tree (BST). Your iterator wil ...

  7. 详解Android开发中Activity的四种launchMode

    Activity栈主要用于管理Activity的切换.当使用Intent跳转至某个目标Activity,需要根据目标Activity的加载模式来加载. Activity一共有以下四种launchMod ...

  8. 设置模式之单例模式（附上一个Objective-C编写的播放音乐的单例类）

    在查阅Cocoa Touch开发文档时,会发现框架中随处可见的大量单例类,比如说,UIApplication.NSFileManager 等. UIApplication 框架中极为常用的一个单例类, ...

  9. iOS中大文件下载（单线程下载）

    主要是需要注意,在客服端发请求给服务器的时候,在请求头里是可以设置服务器返回的数据从哪开始,到哪结束的. 当服务器响应客户端时,是可以拿到服务器返回数据具体类型以及大小的 思路: 在接收到服务器响应时 ...

  10. 正则表达式-python-无捕获分组与分支选择

    无捕获分组 当你要将一部分规则作为一个整体对它进行某些操作,比如指定其重复次数时,你需要将这部分规则用 (?:) 把它包围起来. 分支条件 在正则表达式中,分支条件是一个很常用的条件. 满足条件A 或 ...