终于学会怎么写后台侧列表(隐藏滚动条)
博客专区 > sizeof 的博客 > 博客详情
终于学会怎么写后台侧列表(隐藏滚动条)
sizeof 发表于2年前
终于学会怎么写后台侧列表(隐藏滚动条)
  • 发表于 2年前
  • 阅读 163
  • 收藏 6
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

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

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

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

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

现在要求如下:

  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;     /*必须*/

}

 

共有 人打赏支持
粉丝 4
博文 18
码字总数 11300
×
sizeof
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: