如何正确实现固定边栏?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (85)

正在努力完成这个:

其中侧边栏将是固定的,但右侧(主要内容)将垂直滚动(如果用户的浏览器窗口较小,可能是水平滚动)。实现这一目标的最佳途径是什么?

提问于
用户回答回答于

可以尝试下:

body{
    padding-left:200px;
    margin:0;
}
div#sidebar{
   position:fixed;
   height:100%;
   width:200px; 
   top:0;
   left:0;
   background:grey; 
}
div#content{
    background:black;
    width:100%;
    height:1600px;
}
用户回答回答于

使用Contentdiv作为页面的容器。

 .sidebar {
     position: fixed;
     width: 200px;
     height: 400px;
     background: #000;
 }
 .content {
     margin-left: 200px;
     height: 500px;
     width: auto;
     position: relative;
     background: #f00;
     overflow: auto;
     z-index: 1;
 }
 .info {
     width: 1440px;
     height: 300px;
     position: relative;
     background: #f55;
 }

<div class="sidebar"></div>
<div class="content">
    <div class="info"></div>
</div>

http://jsfiddle.net/djw 28/jz52u/

例子:

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

扫码关注云+社区

领取腾讯云代金券