如何为absolute定位组件设置百分比宽度？

问题原因 #

你的EnrollContainer使用默认的box-sizing: content-box，此时设置的width仅代表内容区域宽度，加上左右padding: 120px后，实际总宽度会超出父容器的计算范围。同时max-width: 870px会在父容器足够宽时强制限制宽度，导致百分比宽度的效果被覆盖，看起来和固定宽度无区别。

另外，absolute定位元素的百分比宽度是基于最近的非static定位祖先（即你的StyledFooter）的padding盒宽度计算的，若父容器没有正确的尺寸基准，也会导致百分比宽度不生效。

修复方案 #

1. 开启border-box盒模型 #

给EnrollContainer添加box-sizing: border-box，让width包含padding和border，确保百分比宽度的计算符合预期：

export const EnrollContainer = styled.section`
    position: absolute;
    box-sizing: border-box; /* 添加这一行 */
    width: calc(100% - 20px);
    max-width: 870px;
    padding: 80px 120px;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
`;

2. 确保父容器有明确的尺寸基准 #

虽然你的StyledFooter已经设置了width: 100%，但如果它的父元素存在padding或margin，可以给StyledFooter也加上box-sizing: border-box，避免宽度计算偏差；同时添加最小高度，防止内部absolute元素脱离文档流导致父容器高度为0：

export const StyledFooter = styled.div`
    width: 100%;
    position: relative;
    box-sizing: border-box; /* 可选，根据父元素情况添加 */
    min-height: 1px; /* 确保父容器有最小高度 */
`;

3. 调整定位逻辑（可选） #

如果你的需求是让EnrollContainer垂直居中在StyledFooter内，当前的top: 0% + transform: translate(-50%, -50%)会让元素向上偏移自身高度的50%，可能导致元素移出父容器可视区域。可以改为：

export const EnrollContainer = styled.section`
    position: absolute;
    box-sizing: border-box;
    width: calc(100% - 20px);
    max-width: 870px;
    padding: 80px 120px;
    top: 50%; /* 改为50% */
    left: 50%;
    transform: translate(-50%, -50%);
`;

同时给StyledFooter设置合适的高度，比如min-height: 200px，确保垂直居中效果可见。

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