前端, 如何让左侧边栏(大纲栏)固定不动

浮生若梦的编程
  • 2.8k

2016/12/6

问题

如图所示, 左边是大纲栏,右边是详情栏(其实就是一本书一样)

想在问题:

  1. 滚动屏幕时, 越到下面, 就会看不到大纲栏

  2. 需要再次滚动到上面来, 点击大纲, 很恼人

由于不熟悉前端, 相关关键词也不好组织, 故没有搜索到很好的结果.

相关截图

图片描述

上下文环境

回复
阅读 10.2k
3 个回答
✓ 已被采纳
<style>
.main{   
    width:1366px;
    border-right: solid 1px #d6dfea;
    position:absolute;
    top:67px;
    margin-left: -683px; 
    left: 50%;
    bottom:40px;}

.main.leftDiv{ 
    height:100%;
    border: 1px solid #d6dfea;
    width:268px;
    float:left;
    margin-bottom:40px;
    overflow: auto;
    /*以上设置是重点必须的*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height:40px;
    }
.main.right{
    height:100%;
    margin-left:268px;
    /*以上设置是重点必须的*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
    line-height:40px;
}
</style>
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
</div>
可以这样试试将左菜单的高度固定,右边自适应高度,自动添加对应滚动条

左侧设置固定定位position:fixed,设置自己的滚动条

左侧设置固定定位position:fixed
设置自己写个滚动事件 计算出左侧的maigin-top

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏