文档章节

终于学会怎么写后台侧列表(隐藏滚动条)

sizeof
 sizeof
发布于 2016/06/17 03:36
字数 456
阅读 199
收藏 6
点赞 0
评论 0

终于学会怎么写后台侧列表(隐藏滚动条)

首先一个标准后台程序有三部分组成:

  • 顶部条
  • 左侧列表
  • 右侧正文内容

现在要求如下:

  1. 左侧列表可以滑动,但不可见滚动条
  2. 左侧列表滑动时,顶部条不能动
  3. 右侧内容区高度不够时,左侧依然可以滑动

实现和办法:

  1. 左侧列表和顶部条定位使用position:fixed
  2. 左侧列表要使用bottom:0(left:0),否则不能滑动
  3. 左侧列表使用overflow-x:hidden;overflow-y:scroll;
  4. 左侧列表宽度要和右侧内容的margin-left后对齐,其实就是要用右侧正文内容盖住左侧列表的滚动条而隐藏,而盖住的方式是左侧使用fixed,右侧使用relative
  5. html,body使用height:100%(为满足右侧正文高度)
  6. 右侧正文内容区使用height:100%(来撑起高度)
  7. 右侧正文内容区使用position:relative;(用来覆盖左侧多余的滚动条)
  8. body使用overflow-x:hidden;(非必须)
  9. 右侧内容区一定要给个背景颜色,用来盖住左侧滚动条
  10. 左侧列表使用height:100%

 

简单用代码来写就是:

html,body{

    height:100%;

    overflow-x:hidden;    /*非必须*/

}

.topbar{

    position:fixed;     /*必须*/

}

.sidebar{

    position:fixed;     /*必须*/

    left:0;

    bottom:0;    /*必须*/

    overflow-x:hidden;

    overflow-y:scroll;

    width:270px;    /*要比右侧的margin-left长*/

}

.contents{

    height:100%;

    margin-left:250px;    /*要比左侧的宽度短*/

    position:relative;     /*必须*/

}

 

高亮再演绎一下:

 

html,body{

    height:100%;

    overflow-x:hidden;    /*非必须*/

}

.topbar{

    position:fixed;     /*必须*/

}

.sidebar{

    position:fixed;     /*必须*/

    left:0;

    bottom:0;    /*必须*/

    overflow-x:hidden;

    overflow-y:scroll;

    width:270px;    /*要比右侧的margin-left长*/

}

.contents{

    height:100%;

    margin-left:250px;    /*要比左侧的宽度短*/

    position:relative;     /*必须*/

}

 

© 著作权归作者所有

共有 人打赏支持
sizeof
粉丝 4
博文 18
码字总数 11300
作品 0
海淀
前端-优雅的VueJS

Vue.js轻松实现页面后退时,还原滚动位置 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发...

掘金官方 ⋅ 01/08 ⋅ 0

YII2.0之窗体小部件

在工作中用到YII2框架,之前对Yii的Widgets这个不太理解,也就没有用上。最近在查看YII2的英文指南的时候,终于弄明白了是怎么一回事。 举个简单的例子,如果在做后台开发的时候,大部分页面...

xtceetg ⋅ 2017/02/16 ⋅ 0

jquery滚动条定位问题

如上的 单题和列表 的切换,实际是一套题,只是点 单题 时只显示一个,其他的隐藏,现在有个问题,比如我在列表模式下滚动到20题,再点 单题 怎么显示20题(每个题的div的类名与题号一样的)...

jquery-php ⋅ 2016/07/27 ⋅ 2

关于overflow元素,hidden属性“隐藏失效”问题的探究

1.overflow元素属性的简单介绍。 正如w3c介绍的那样……overflow总共有五个属性。 overflow:visible;默认值,如果内容超出,则会呈现在盒子之外。 overflow:scroll;超出的内容会以滚动条的形...

wx5acc491a99d46 ⋅ 04/24 ⋅ 0

IOS 非常流畅的滑动tableView

为什么要写这篇文章呢?之前写过一篇,因为手机打字不是很方便,还有之前同事用6splus 定下午茶时候,我滑动列表时候竟然误以为是安卓系统的手机。 tableview 流畅度可以用fps来测试,到60帧...

人魔七七 ⋅ 2016/03/13 ⋅ 0

Windows下简单的emacs配置

刚开始学习这个编辑器,在网上翻了一些东西,都不太懂得,主要是那些都是给高手用的配置,我这个菜鸟当然不懂得。搜索了一下,得到一个简单的配置,以后慢慢学习就完善起来。 首先设置环境变...

ryany ⋅ 2010/11/30 ⋅ 0

【Android】android ListView几个比较特别的属性

由于这两天在做listView的东西,所以整理出来一些我个人认为比较特别的属性,通过设置这样的属性可以做出更加美观的列表 首先是stackFromBottom属性,这只该属性之后你做好的列表就会显示你列...

少年追梦 ⋅ 2014/11/19 ⋅ 0

android ListView几个比较特别的属性

由于这两天在做listView的东西,所以整理出来一些我个人认为比较特别的属性,通过设置这样的属性可以做出更加美观的列表 首先是stackFromBottom属性,这只该属性之后你做好的列表就会显示你列...

Koon.LY ⋅ 2012/05/31 ⋅ 0

python-51: 带有验证码的模拟登陆

好了好了,又开更了,前面两天都在研究如何实现带有验证码的登陆,这个过程略微波折,幸好得到一位做网页设计的朋友的解答,虽然现在有的知识还不是很清楚,但好歹终于有点进展了,毕竟我也还...

达岭凹老大 ⋅ 2015/12/11 ⋅ 1

android ListView美化-->几个比较特别的属性

ListView在一般的安卓应用中大量地使用,因此我整理出来一些个人认为比较特别的属性,通过设置这样的属性可以做出更加美观的列表: 首先是stackFromBottom属性,这只该属性之后你做好的列表就...

长平狐 ⋅ 2012/09/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 35分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 55分钟前 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部