98.css中如何让status-bar完美适配父容器底部不溢出？

状态栏溢出、宽度适配异常由两点导致：

• 98.css默认给.status-bar组件添加了左右外边距，组件自身也带2px的复古立体边框
• 对绝对定位元素直接设置width: 100%时，默认content-box盒模型下宽度仅计算内容区，元素的边框、外边距会额外占据空间，最终总宽度超出父容器，就会出现右下角溢出的问题；硬写width: 99%属于凑数值的方案，必然存在对齐偏差，也无法自动居中。

实际溢出效果：

替换原有相关样式即可，不需要手动调整百分比宽度：

html, body {
    margin: 0;
    background: #c0c0c0;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
}
.relative-position {
    position: relative;
    width: auto;
}
/* 替换原有.bottom、.width-stretch类的样式 */
.status-bar.bottom {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: 0;
    box-sizing: border-box;
}
/* 给窗口内容区预留状态栏位置，避免内容被遮挡 */
.window-body {
    margin-bottom: 32px;
}

实现逻辑说明：

• 用left: 0; right: 0的方式让绝对定位元素自动铺满父容器宽度，比写width: 100%适配性更强，不会受盒模型参数影响
• 重置状态栏默认外边距、开启border-box后，组件自带的边框会被算入总宽度内，不会额外撑出容器
• 该方案下状态栏自动和父容器左右边缘对齐，不需要额外加居中样式。

• 优先选择无全局样式重置的轻量原子类工具，比如UnoCSS、Windi CSS，仅开启布局、间距类规则即可，不会破坏98.css预设的复古组件样式，能大幅减少自定义CSS代码量
• 不要直接搭配默认开启全局样式重置的框架（比如默认配置的Tailwind、Bootstrap），这类框架会覆盖98.css写好的立体边框、系统字体、按钮交互效果，必须使用时要手动关闭全局重置规则
• 如果需要实现窗口拖拽、折叠、右键菜单这类经典系统交互，可以搭配专门的复古Web系统交互脚本，不需要重复编写基础逻辑。

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