嘿，我太懂你现在的烦恼了——用固定宽高写的布局，换个屏幕直接就乱套，还得手动算尺寸，简直是给自己挖坑！我之前做后台系统的时候天天碰这种需求，给你分享两个靠谱的现代CSS方案，完美解决固定导航+自适应内容区的问题，还能轻松实现全屏高度（要减去头部高度也超简单）。

先说说你现有代码里的几个小问题，帮你避坑：

• 用inline-block布局会自带默认空格间距，很容易导致排版错位
• 固定的width和height完全没响应式能力，换个设备直接崩
• HTML里嵌套了两个.body类，会导致样式重叠混乱，建议把内容区的类名改成.content这类更清晰的名字

方案一：Flexbox布局（首推！简单易上手） #

Flexbox是现在做这种一维布局的首选，代码简洁，兼容性覆盖几乎所有现代浏览器。

具体思路：

• 先重置浏览器默认样式，去掉html、body的默认边距，让它们占满整个视口高度
• 外层容器.main用display: flex，内部子元素自动横向排列
• 左侧导航.navigation设固定宽度100px，再加flex-shrink: 0防止被压缩
• 右侧内容区.content用flex: 1，自动占满剩余所有空间
• 如果有顶部header，只需要把.main的高度改成calc(100vh - 头部高度)就行，比如header高50px，就写calc(100vh - 50px)

完整代码示例：

/* 重置默认样式，避免浏览器自带边距干扰 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 让根元素占满视口高度 */
}

/* 可选：如果有顶部头部的样式 */
/* .header {
  height: 50px;
  background: #eee;
  line-height: 50px;
  padding: 0 10px;
} */

.main {
  display: flex;
  height: 100%; /* 占满父元素高度；有header的话改成calc(100vh - 50px) */
}

.navigation {
  width: 100px;
  flex-shrink: 0; /* 禁止导航栏被压缩 */
  background-color: aqua;
  padding: 10px;
}

.content {
  flex: 1; /* 自动填充剩余所有空间 */
  background-color: blue;
  padding: 10px;
  color: #fff;
}

<!-- 可选：顶部头部 -->
<!-- <div class="header">页面头部</div> -->
<div class="main">
  <div class="navigation">Navigation</div>
  <div class="content">Body</div>
</div>

方案二：Grid布局（适合复杂二维布局，这里也好用） #

Grid是二维布局神器，如果你之后要在内容区做更复杂的排版，用Grid会更顺手。

思路超简单：给.main设置display: grid，用grid-template-columns指定列宽，左边100px，右边用1fr（代表剩余所有空间），高度同样设为100%。

完整代码示例：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 可选：顶部头部样式 */
/* .header {
  height: 50px;
  background: #eee;
  line-height: 50px;
  padding: 0 10px;
} */

.main {
  display: grid;
  grid-template-columns: 100px 1fr; /* 第一列100px，第二列占剩余空间 */
  height: 100%; /* 有header的话改成calc(100vh - 50px) */
}

.navigation {
  background-color: aqua;
  padding: 10px;
}

.content {
  background-color: blue;
  padding: 10px;
  color: #fff;
}

<!-- 可选：顶部头部 -->
<!-- <div class="header">页面头部</div> -->
<div class="main">
  <div class="navigation">Navigation</div>
  <div class="content">Body</div>
</div>

这两个方案都不用固定宽高，完全自适应不同屏幕尺寸，导航和内容区自动占满需要的高度，再也不用手动算像素啦！

内容来源于stack exchange