我试图完成这个设计:
侧边栏将被固定,但右侧(主要内容)将垂直滚动(如果用户的浏览器窗口较小,则可能会水平)。实现这一目标的最好方法是什么?
我试着让边栏被固定为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; } }