Django项目中如何实现容器width:100%减固定导航宽度？

直接给三种生产环境可用的方案，按推荐优先级排序：

方案1：Flex弹性布局（最推荐，维护成本最低） #

不需要手动计算宽度，后续改侧边栏宽度时不用同步修改内容区样式，没有语法坑。
先给外层布局容器加弹性布局规则，示例代码：

/* 全局重置，避免盒模型异常，所有项目建议都加 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 侧边栏和内容区的共同父容器，一般是body或者全局layout包裹层 */
.page-wrap {
  display: flex;
  min-height: 100vh;
}

/* 你封装好的250px宽垂直导航栏 */
.vertical-nav {
  width: 250px;
  flex-shrink: 0; /* 强制导航栏不被压缩，保持固定宽度 */
  height: 100vh;
}

/* 要填充剩余宽度的内容容器 */
.main-container {
  flex: 1; /* 自动占据父容器剩余所有宽度，不用写width计算 */
}

方案2：calc()计算函数（最直接，适配固定定位侧边栏场景） #

如果你的侧边栏用position: fixed固定在左侧，直接用CSS原生计算函数写宽度即可，注意语法坑：

.vertical-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
}

.main-container {
  /* 减号两侧必须加空格！写calc(100%-250px)会直接失效 */
  width: calc(100% - 250px);
  margin-left: 250px; /* 避开固定定位的侧边栏占位 */
}

踩坑提醒：calc()内的加减运算符两侧必须保留半角空格，否则浏览器无法识别计算规则。

方案3：BFC触发规则（适配老项目浮动布局） #

如果是维护老项目用了浮动布局，不需要改父元素样式，直接给内容容器触发BFC就能自动避开浮动侧边栏占满剩余宽度：

.vertical-nav {
  float: left;
  width: 250px;
  height: 100vh;
}

.main-container {
  overflow: hidden; /* 触发BFC，自动规避左侧浮动元素的占位 */
}

这个方案不需要手动计算宽度，也不需要改父级样式，但是灵活性不如Flex，只适合老项目兼容场景。

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