如何将页面主体内容与左侧垂直Navbar分离？

十有八九是HTML结构嵌套错误，或是CSS布局未给主体内容留出左侧空间，导致标题被Navbar的布局“吞并”了。以下是具体修复方案：

1. 修正HTML结构 #

确保Navbar和主体内容是同级元素，绝对不要把<h1>嵌套进Navbar的容器标签里：

<!-- 正确结构示例 -->
<nav class="sidebar-nav">
  <!-- Navbar内部内容，比如菜单链接 -->
  <a href="#">首页</a>
  <a href="#">文章分类</a>
</nav>

<!-- 主体内容区域，单独存放标题和页面内容 -->
<main class="main-content">
  <h1>这是页面主标题</h1>
  <!-- 其他页面内容 -->
</main>

2. 调整CSS布局 #

方案一：固定定位Navbar #

给Navbar设置固定左侧定位，同时给主体内容设置左侧外边距避开Navbar：

.sidebar-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px; /* 按需调整宽度 */
  height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.main-content {
  margin-left: 220px; /* 等于Navbar宽度 + 留白，按需调整 */
  padding: 20px;
}

方案二：Flex布局（更简洁） #

用Flex布局让Navbar和主体内容横向排列，主体内容自动占据剩余空间：

body {
  display: flex;
  margin: 0; /* 清除默认边距 */
}

.sidebar-nav {
  width: 200px;
  background-color: #f5f5f5;
  padding: 20px;
}

.main-content {
  flex: 1; /* 占据剩余所有空间 */
  padding: 20px;
}

3. 排查其他可能 #

• 检查是否给Navbar加了float: left却没给主体内容清除浮动，这种情况也会导致内容错位；
• 确认Navbar的容器没有设置overflow: hidden，避免把外部内容“包裹”进去。

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