如何通过CSS将主页内容（home-content）定位在侧边导航栏之后？

首先看你代码里的几个核心问题：

1. CSS 中 calc 语法错误：calc(100%-240px) 缺少运算符两侧的空格，浏览器无法识别该计算式，正确写法是 calc(100% - 240px)
2. HTML 结构存在多余闭合标签：<div class="sidebar"></div> 后多了一个无匹配的 </div>，需删除
3. 侧边栏未定义宽度与定位规则，无法和 home-content 形成正确的布局关系

下面提供两种可行的解决方案：

方案一：延续绝对定位思路（修正原有代码） #

修正后的 CSS： #

.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  height: 100%;
  background-color: #f5f5f5; /* 加背景色方便区分区块 */
}

.home-content {
  position: absolute;
  height: 100%;
  width: calc(100% - 240px); /* 修正calc语法 */
  left: 240px;
  top: 0;
  padding: 12px; /* 可选，避免内容贴边 */
}

.t {
  font-size: 25px;
  font-weight: 500;
  color: #000;
  margin-top: 12px;
}

修正后的 HTML： #

<body>
  <div class="sidebar">
    <!-- 侧边栏内容 -->
  </div>
  <div class="home-content">
    <div class="t">
      <h2>Home Content</h2>
    </div>
  </div>
</body>
</html>

方案二：使用 Flexbox（现代响应式布局推荐） #

这种方式无需绝对定位，布局更灵活且适配性更强：

CSS： #

body {
  margin: 0; /* 清除默认margin */
  display: flex; /* 让子元素横向排列 */
  height: 100vh; /* 占满视口高度 */
}

.sidebar {
  flex: 0 0 240px; /* 固定宽度240px，不伸缩 */
  background-color: #f5f5f5;
}

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

.t {
  font-size: 25px;
  font-weight: 500;
  color: #000;
  margin-top: 12px;
}

HTML： #

<body>
  <div class="sidebar">
    <!-- 侧边栏内容 -->
  </div>
  <div class="home-content">
    <div class="t">
      <h2>Home Content</h2>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sanju De Silva