基于其他元素计算高度时，为何该div仍可滚动？

你的布局无内容却能滚动，核心问题出在margin溢出+高度计算逻辑错误：

1. .navigation-container 和 .footer-container 是固定定位（position: fixed），完全脱离文档流，不会占用 .page-wrapper-container 的空间。
2. .page-wrapper-container 设置了 height: calc(100% - var(--navigation-height) - var(--footer-height))，但内部 .page-wrapper-main 又加了 margin-top: var(--navigation-height) 和 margin-bottom: var(--footer-height)。margin是元素外部间距，会让 .page-wrapper-main 整体偏移，导致 .page-wrapper-container 的实际占用高度被撑大（自身高度+上下margin），超出视口后就出现了滚动条。
3. 同时 .page-wrapper-main 的 height: calc(100% - 2 * var(--spacer-large)) 基于父容器高度计算，再叠加上下margin，进一步加剧了高度溢出。

以下两种方案任选其一即可：

方案一：调整margin为padding，修正高度计算 #

把 .page-wrapper-main 的上下margin换成父容器的padding，同时让padding包含在高度内：

.page-wrapper-container {
    height: 100%; /* fixed元素不占文档流，直接用100% */
    background-color: red;
    position: relative;
    padding-top: var(--navigation-height);
    padding-bottom: var(--footer-height);
    box-sizing: border-box; /* 让padding计入容器高度 */
}

.page-wrapper-main {
    /* 移除上下margin */
    padding: var(--spacer-large);
    width: calc(100% - 2 * var(--spacer-large));
    height: 100%; /* 父容器已预留导航和footer空间，直接用100% */
    background-color: green;
    box-sizing: border-box; /* 让padding计入自身高度 */
}

方案二：用Flexbox布局（更简洁可靠） #

用Flex垂直排列自动分配空间，避免手动计算高度：

#root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.page-wrapper-container {
    flex: 1; /* 占据导航和footer之外的所有剩余空间 */
    background-color: red;
    padding: var(--spacer-large);
    box-sizing: border-box;
}

.page-wrapper-main {
    height: 100%;
    background-color: green;
}

.navigation-container {
    height: var(--navigation-height);
    background-color: hotpink;
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* 移除fixed，让它参与Flex布局 */
}

.footer-container {
    height: var(--footer-height);
    width: 100%;
    background-color: red;
    /* 移除fixed，让它参与Flex布局 */
}

HTML结构无需改动，调整后布局会自动适配视口高度，不会出现多余滚动条。

内容的提问来源于stack exchange，提问作者four-eyes