You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何调整HTML网页中Fixed Sidebar的宽度?(CSS实现)

解决方案

问题出在侧边栏的宽度设置过小,且页面内容的左外边距与侧边栏宽度不匹配。按以下修改即可实现固定宽度的侧边栏:

  1. 设置侧边栏固定宽度:修改#navbar的width属性为你需要的固定值(比如240px),替换原来的50px,这样侧边栏就会保持该宽度不再变动。
  2. 同步页面内容的左外边距:确保body的margin-left值和侧边栏的width一致,避免页面内容被侧边栏遮挡。

修改后的完整CSS代码:

body {
  background-color: paleturquoise;
  margin-left: 240px; /* 与侧边栏宽度保持一致 */
}

.image-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.image-row img {
  width: 30%;
  height: auto;
}

figure {
  text-align: center;
}

figcaption {
  font-size: 0.8em;
  color: #666;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px; /* 设置你需要的固定宽度 */
  height: 100%;
  background-color: #000;
  overflow-y: auto;
}

#navbar p, #navbar a { 
   color: #808080;
}

.sticky {
  position: fixed;
  top: 0;
}

如果侧边栏内的内容超出设置的宽度,overflow-y: auto会自动生成垂直滚动条,不影响侧边栏的固定宽度效果。

内容的提问来源于stack exchange,提问作者dolly patel

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.23 08:24:55