桌面端视图主内容被挤出页面的响应式布局问题求助

问题原因 #

你当前代码里的#navbar使用了position: sticky，但sticky元素仍会占据文档流空间。由于导航栏是块级元素，默认占满整行，下方的.main-section自然会被挤到导航栏正下方——哪怕设置了margin-left: 30vw，也只是让内容向右偏移，无法实现左右并排的效果。

修复方案 #

方案一：用固定定位脱离文档流 #

修改媒体查询中的#navbar样式，将position: sticky改为position: fixed，让导航栏脱离文档流，不再占用页面空间，主内容就能正常显示在右侧：

@media (min-width: 680px) {
  body {width: 100vw;}
  .main-section {margin-left: 30vw;}
  /* 修改定位方式为fixed */
  #navbar {position: fixed;top: 0;left: 0;width: 30vw;height: 100vh;border-right: 2px solid #5C5470;}
  #navbar ul {display: flex;flex-direction: column;list-style: none;margin: 0;padding: 0;}
  #navbar li {text-align: center;width: 100%;}
  #navbar a {color: #352F44;text-decoration: none;display: block;border: 1px solid black;text-align: left;padding: 10px;font-size: 1.5em;margin: 2px;}
  #navbar header {font-size: 2.5em;text-align: left;padding: 10px;font-weight: 600;margin-bottom: 10px;}
}

方案二：用Flex布局实现并排（更推荐） #

给包含导航栏和主内容的容器#main-doc设置flex布局，让两者横向排列，既保持文档流完整性，又能实现预期的并排效果：

@media (min-width: 680px) {
  body {width: 100vw;}
  /* 给主容器设置flex布局 */
  #main-doc {display: flex;}
  /* 主内容移除margin-left，用flex:1占满剩余空间 */
  .main-section {flex: 1;padding: 10px;letter-spacing: .2;}
  #navbar {position: sticky;top: 0;width: 30vw;height: 100vh;border-right: 2px solid #5C5470;}
  #navbar ul {display: flex;flex-direction: column;list-style: none;margin: 0;padding: 0;}
  #navbar li {text-align: center;width: 100%;}
  #navbar a {color: #352F44;text-decoration: none;display: block;border: 1px solid black;text-align: left;padding: 10px;font-size: 1.5em;margin: 2px;}
  #navbar header {font-size: 2.5em;text-align: left;padding: 10px;font-weight: 600;margin-bottom: 10px;}
}

补充说明 #

方案二的优势在于：导航栏的sticky定位依然生效（滚动时固定在顶部），主内容会自动填充剩余空间，适配不同屏幕宽度，同时避免了固定定位可能带来的布局冲突问题。你之前认为“并非宽度问题”的判断是对的，本质是元素的文档流布局逻辑导致的，而非宽度数值错误。

内容的提问来源于stack exchange，提问作者Goju Noah