固定页脚在侧边菜单滑出时向右移动答案

【问题标题】：Fixed footer moves right when side-menu slides out固定页脚在侧边菜单滑出时向右移动
【发布时间】：2023-02-01 17:53:06
【问题描述】：

我在左侧有一个侧边菜单，它在悬停时从左向右展开，也可以在单击按钮时展开。此外，我有一个固定的页脚（在底部），我的问题是当侧边菜单展开时，整个页面内容调整大小但由于页脚是固定的，它向右移动并离开屏幕，按钮不是可见了。当我删除使页脚固定的类时，页脚也会调整大小而不会超出屏幕范围，但它不会固定。

侧面菜单展开时调整固定页脚大小的解决方案是什么。我在 react.js 打字稿中使用 Bootstrap 5

我尝试使用 bootstrap 5 行和列，但由于它适用于屏幕尺寸，所以它没有给我结果

footer css code: 
.footer {   
position: fixed;   
bottom: 0;   
width: 92.5%;   
background-color: #fff; 
}

【问题讨论】：

您可以在问题下添加带有“编辑”链接的页脚 css 而不是添加评论。如果您还分享有关如何使左侧菜单展开的代码/CSS 的相关部分，这将大有帮助
您真的应该为我们分享更多代码以便能够为您提供帮助，对于您的情况，我的直觉告诉我，使页脚成为可调整大小部分的子项（可能需要包装 div）应该是解决问题的关键，但没有代码我不知道如何

【解决方案1】：

要修复侧边菜单滑出时移动的固定页脚，您可以使用以下 CSS 技术：

将页脚的位置设置为绝对位置，而不是固定位置。

使用 JavaScript 计算内容的高度并相应地设置页脚的高度。

为页脚提供一个等于其高度的负底部边距，并将 bottom 属性设置为 0。这将确保页脚保持在原位。

例子：

HTML:

 <body>
      <div class="content">...</div>
      <footer class="footer">...</footer>
    </body>

CSS：

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  margin-bottom: -50px;
}

您也可以使用 flexbox 和 grid 来实现相同的目的。这取决于您想要实现的确切布局。

【讨论】：