html 固定侧边栏,css – 如何正确实现固定侧边栏？

使用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;

}

您的内容将需要成为放置页面的容器。这里的值是我的测试，看看我是否正确。如果您的宽度和高度超过您为内容设置的值，则会显示滚动条。

编辑：响应侧边栏

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

例：

@media (min-width:600px) {

.sidebar {

width: 250px;

}

.content {

margin-left: 250px;

}

}