文档章节

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

sizeof
 sizeof
发布于 2016/06/17 03:36
字数 456
阅读 212
收藏 6

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

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

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

现在要求如下:

  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
0
基于 Beego 开发的后台管理系统 - gardens

gardens是基于Beego开发的易用、易扩展、界面友好的轻量级功能权限管理系统。 前端框架基于AdminLTE2进行资源整合,包含了多款优秀的插件,是笔者对多年后台管理系统开发经验精华的萃取。 本...

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

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

wx5acc491a99d46
04/24
0
0
jquery滚动条定位问题

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

jquery-php
2016/07/27
85
2
IOS 非常流畅的滑动tableView

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

人魔七七
2016/03/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

磁饱和

定义 磁饱和是磁性材料的一种物理特性,指的是导磁材料由于物理结构的限制,所通过的磁通量无法无限增大,从而保持在一定数量的状态。 举例说明 假定有一个电磁铁,通上一个单位电流的时候,...

colinux
17分钟前
1
0
Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
今天
3
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
今天
4
0
Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
1
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部