css 中的宽度计算问题

在设置元素宽度时，偶尔会遇到一些问题。本文将讨论一个特定的问题：当一个固定定位的底部按钮栏在侧边栏打开时会跟随移动并超出边框。

问题

有一个底部按钮栏，使用固定定位设置在页面的底部。当侧边栏打开时，按钮栏会跟随移动，从而超出了页面的边框。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

解决方案

为了解决这个问题，需要对 html 结构进行一些修改，让按钮栏相对于其父元素而不是页面本身进行定位。以下是修改后的代码：

<div>
    <!-- 侧边栏 宽度可变化  -->
    <aside></aside>
    <!-- 主页面 -->
    <div style="position: relative;">
        <some-body />
        <!-- 相对于主页面(父div)设置position: absolute; bottom: 0; width: 100%;  -->
        <footer-bar />
    </div>
</div>

在修改后的代码中，父 div 使用 position: relative; 属性，将按钮栏相对于该父元素进行定位。当侧边栏打开时，父 div 的宽度会增加，按钮栏也会相应地增加宽度，从而保持在父 div 的范围内。

这个解决方案通过确保按钮栏始终相对于其父元素进行定位来解决了问题。因此，当侧边栏的宽度发生变化时，按钮栏的宽度也会随之进行调整。