css – 如何正确实现固定侧边栏?

前端之家收集整理的这篇文章主要介绍了css – 如何正确实现固定侧边栏?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图完成这个设计:

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

我试着让边栏被固定为200px的固定宽度,然后主要内容的边距为200px。但是,如果用户的浏览器小于主要内容,则当用户尝试水平滚动时,侧边栏重叠所有内容

有一个更聪明的方式来实现这一点吗?谢谢!

解决方法

使用content div作为页面的容器。
.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/djwave28/JZ52u/

编辑:响应侧边栏

要有一个敏感的固定侧边栏,只需添加一个媒体查询

例:

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

这是另一个小提琴:http://jsfiddle.net/djwave28/JZ52u/363/

猜你在找的CSS相关文章