因为用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. （原创）发布一个C++版本的ORM库SmartDB（一）

    先简单说说ORM的优点: 提高开发效率,减少重复劳动,只和业务实体打交道,由业务实体自动生成sql语句,不用手写sql语句. 简单易用, 可维护性好. 隔离数据源,使得我们更换数据源时不用修改代码. ...

  2. 非nodejs方式的vue.js的使用

    1.node环境 详细见我之前的文章,node的安装 2.git环境 git bash命令窗,支持bash命令,cmd不支持bash命令 3.cnpm安装 cnpm是针对国内使用npm网络慢的而使用的 ...

  3. 【Linux技术】BusyBox详解

    BusyBox 是很多标准 Linux® 工具的一个单个可执行实现.BusyBox 包含了一些简单的工具,例如 cat 和 echo,还包含了一些更大.更复杂的工具,例如 grep.find.moun ...

  4. strrchr()函数

    函数简介 函数名称: strrchr 函数原型:char *strrchr(const char *str, char c); 所属库: string.h 函数功能:查找一个字符c在另一个字符串str ...

  5. 【Java】通用版URLConnection 带cookie下载PDF等资源文件

    /**** * 下载pdf文件 */ public static void downloadNet(String urlStr, String fileName, String savePath) t ...

  6. python dict与list

    本文实例讲述了python中字典(Dictionary)用法.分享给大家供大家参考.具体分析如下: 字典(Dictionary)是一种映射结构的数据类型,由无序的“键-值对”组成.字典的键必须是不可改 ...

  7. [转载]生活在 Emacs 中

    Brian Bilbrey2002 年 8 月 20 日发布 教程简介 本教程讲什么? Emacs 是一个流行的无模式文本编辑器,有许多强大的功能.本教程将教您使用 Emacs 的基础知识.为了让您很 ...

  8. spring security 注解@EnableGlobalMethodSecurity详解

     1.Spring Security默认是禁用注解的,要想开启注解,需要在继承WebSecurityConfigurerAdapter的类上加@EnableGlobalMethodSecurity注解 ...

  9. 愿Linux红帽旋风吹得更加猛烈吧！

    大约在2000年年初.<中国青年出版社>准备从台湾引进图书(中译本)"Linux红帽旋风"(美国Robert Young),让我为该书写一个前言. 该书作者罗伯特.扬是 ...

  10. Android—— Fragment 真正的完全解析（上）（转）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37970961 自从Fragment出现,曾经有段时间,感觉大家谈什么都能跟Fra ...