Div未继承父容器高度问题（Weasyprint+Jinja转PDF场景）

核心问题是百分比高度在Weasyprint中的计算逻辑依赖完整的高度链，你的代码里缺少几个关键设置，导致子元素无法正确继承父容器高度：

1. 补全高度链（根元素到父容器） #

Weasyprint处理百分比高度时，需要从子元素向上到html/body的所有父容器都有明确高度值，否则百分比会失效。先给根元素和外层容器添加高度：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* 如果页面有外层容器（比如.page），也需设置高度 */
.page {
  height: 100%; /* 或直接设为A4纸物理高度：297mm */
}

2. 修复.box-2的高度设置 #

.left-content和.right-content的直接父元素是.box-2，但你没给它设置高度，导致子元素的height:100%没有正确参照对象。添加以下CSS：

.section-2 .box-2 {
  height: 100%; /* 让.box-2撑满.section-2的高度 */
}

3. 给.right-content补全高度设置 #

你的代码里.right-content未设置height:100%，加上后才能和.left-content一起撑满.box-2的高度：

.section-2 .right-content {
  width: 35%;
  height: 100%; /* 新增该行 */
  border: 1px solid black;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

4. 优化Flex布局兼容性（可选） #

Weasyprint对flex子元素的百分比高度支持可能需要明确flex属性，给左右内容块添加属性确保空间分配正确：

.section-2 .left-content {
  width: 65%;
  height: 100%;
  flex: 0 0 65%; /* 明确flex基准值 */
}
.section-2 .right-content {
  width: 35%;
  height: 100%;
  flex: 0 0 35%; /* 明确flex基准值 */
  border: 1px solid black;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

替代方案：使用绝对单位（PDF场景推荐） #

PDF是物理尺寸，用mm/cm等绝对单位比百分比更可靠，可直接给.section-2设置固定高度：

.section-2 {
  height: 50mm; /* 根据实际需求调整 */
  width: 100%;
  border: 1px solid black;
}

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