CSS如何实现导航栏与内容容器对齐且适配多屏幕尺寸

问题背景 #

你要实现的窗中窗布局在台式机上导航栏和内容容器底部对齐效果如下：

在笔记本上出现内容容器底部溢出问题，效果如下：

问题根源 #

你当前的布局依赖固定margin、relative偏移和写死的vh高度计算，数值只匹配台式机下的导航栏高度，换设备后导航栏实际高度发生变化，手动计算的calc(95vh - 82px)不再适配，加上body的全局margin和内容容器的top:70px偏移没有和布局逻辑联动，才会出现内容底部溢出的问题。

最优解决方案：使用Flex布局实现自适应等高对齐 #

不需要手动计算任何高度，Flex会自动完成元素对齐适配，适配所有设备尺寸：

第一步：全局样式重置 #

统一盒模型，避免默认样式破坏布局：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  /* 原来的全局50px外边距改用padding实现，避免margin塌陷问题 */
  padding: 50px;
  min-height: 100vh;
  /* 外层开启flex布局，将导航栏和内容容器放在同一行 */
  display: flex;
  gap: 30px; /* 控制导航栏和内容容器的水平间距，可自行调整 */
  align-items: stretch; /* 核心属性：两个子元素自动等高 */
}

第二步：调整导航栏样式 #

删除多余的固定margin，保留原有样式属性：

.navbar {
  width: 250px; /* 导航栏固定宽度，可根据设计调整 */
  background-color: rgba(0, 0, 0, 0.096);  
  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
  border-bottom-left-radius: 25px;
  border-right-width: 2px;
}

第三步：调整内容容器样式 #

删除相对定位偏移、固定高度计算和多余margin：

.content-container {
  flex: 1; /* 自动占满剩余宽度 */
  background-color: #f0f0f0da;
  overflow-y: auto; /* 内容超出时才显示滚动条，体验更友好 */
  overflow-x: hidden;
}

适配效果说明 #

修改后不管导航栏高度随设备如何变化，两个容器都会自动保持等高，底部完全对齐，且会自动适配所有屏幕尺寸，不需要做任何额外的媒体查询调整。

内容的提问来源于stack exchange，提问作者Marko Žilić