因为用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. Java 8 – 日期和时间实用技巧

    当你开始使用Java操作日期和时间的时候,会有一些棘手.你也许会通过System.currentTimeMillis() 来返回1970年1月1日到今天的毫秒数.或者使用Date类来操作日期:当遇到加 ...

  2. FFmpeg(1)-创建支持FFmpeg的AS项目

    一.新建Android Studio项目 注意点: 1.在“Create Android Project”栏目时,须勾选“Include C++ support” 复选框: 2.在“Customize ...

  3. 谷歌Chrome浏览器小于12px字号显示的BUG

    webkit的私有属性:html{-webkit-text-size-adjust:none;}

  4. Zookeeper之Zookeeper的Client的分析

    1)几个重要概念 ZooKeeper:客户端入口 Watcher:客户端注册的callback ZooKeeper.SendThread: IO线程 ZooKeeper.EventThread: 事件 ...

  5. SQL 迭代查询语句

    SQL迭代查询 PL/SQL with ORG_Tree(ObjectId,parentID) as ( select a.ObjectId,a.parentID from Ot_Organizati ...

  6. Python3机器学习—Tensorflow数字识别实践

    [本文出自天外归云的博客园] Windows下Anaconda+Tensorflow环境部署 1. 安装Anaconda. 2. 开始菜单 > 所有程序 > Anaconda 3 (64- ...

  7. 有了#ifdef 为什么还需要#if defined

    有了#ifdef 为什么还需要#if  defined ? #include <stdio.h> #define A #define B void test(int a,int b) { ...

  8. OpenStack云计算（一）——OpenStack 网络

    关于OpenStack OpenStack它是 Rackspace Cloud 和 NASA 负责的一个开源基础架构即服务的云计算项目. OpenStack 是一个由开发者和云计算技术人员的全球协作开 ...

  9. iOS微信实现第三方登录的方法

    这篇文章主要介绍了iOS微信第三方登录实现的全过程,一步一步告诉大家iOS微信实现第三方登录的方法,感兴趣的小伙伴们可以参考一下   一.接入微信第三方登录准备工作.移动应用微信登录是基于OAuth2 ...

  10. struts工作原理不错的解释___

    Struts 使用 Model 2 架构.Struts 的ActionServlet 控制导航流.其他Struts 类,比如Action, 用来访问业务逻辑类.当 ActionServlet 从容器接 ...