我正在尝试完成这个设计: 侧边栏将被固定,但右侧(主要内容)将垂直滚动(如果用户的浏览器窗口较小,则可能水平滚动)。实现这一目标的最佳方法是什么?
我尝试将侧边栏“固定”为固定宽度为 200 像素,然后主要内容的左侧边距为 200 像素。但是,如果用户的浏览器小于主要内容,则边栏会在用户尝试水平滚动时与所有内容重叠。
有没有更聪明的方法来实现这一目标?谢谢!
使用内容 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/
这是一个替代方案:http: //jsfiddle.net/BoyWonder/8mVQX/embedded/result/
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;
}