文档章节

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

sizeof
 sizeof
发布于 2016/06/17 03:36
字数 456
阅读 219
收藏 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。它以规则来驱动状态更新,它带来的是开发...

掘金官方
2018/01/08
0
0
基于 Beego 开发的后台管理系统 - gardens

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

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

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

wx5acc491a99d46
2018/04/24
0
0
IOS 非常流畅的滑动tableView

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

人魔七七
2016/03/13
0
0
Windows下简单的emacs配置

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

ryany
2010/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 孤独到都和病毒发生了感情了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# 逃跑计划《一万次悲伤 (Live)》 《一万次悲伤 (Live)》- 逃跑计划 手机党少年们想听歌,请使劲儿戳(这里) 现在...

小小编辑
50分钟前
18
5
test

//// main.c// Test//// Created by 吕颖 on 2019/1/16.// Copyright © 2019年 carmen. All rights reserved.//#include <stdio.h>#include <stdlib.h>#include <t......

carmen-ly
今天
3
0
Android webview热门组件agentweb:4.0.2无法自适应的问题

Android webview热门组件agentweb:4.0.2无法自适应的问题 //设置自适应屏幕,两者合用mAgentWeb.getAgentWebSettings().getWebSettings().setUseWideViewPort(true); //将图片调整到适合w...

Gemini-Lin
今天
5
0
如何维护一个自己的 golang doc 服务

本文内容是如何维护一个golang 在线的doc 服务。 1 什么是godoc ? godoc 是 golang 官方提供的文档生成工具, 2 为什么要有godoc ? 我们经常遇到一个问题,就是代码和文档不一致,线上代码版...

鼎铭
今天
5
0
js中的对象创建的模式以及继承模式

对象创建模式: 工厂模式 构造函数模式 原型模式 继承模式 原型式继承 寄生式继承 构造函数 原型式和构造函数的组合式(缺点:运行两次超类类函数,积累函数的属性被挂载在原型对象上和实例对...

莫西摩西
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部