时间戳

首页 > 解决方案 > 菜单折叠时div宽度对齐不起作用

javascript - 菜单折叠时div宽度对齐不起作用

问题描述

我正在使用角度材料和引导程序。

在我的应用程序中，我有可折叠的垂直菜单。我有一个宽度为

width: calc(100vw - 186px);

当菜单栏打开时，上述宽度可以正常工作。当我关闭菜单时，我会得到一些额外的空间，如下图所示。

在此处输入图像描述

菜单栏打开时

在此处输入图像描述 我对 CSS 和 html 不太熟悉。请帮助我实现使 div 适合屏幕，甚至菜单折叠

我在下面的 stackblitz 中有工作演示：

https://stackblitz.com/edit/material-responsive-islrxo?file=src%2Fapp%2Fapp.component.css

标签： javascripthtmlcssangular-material

解决方案

这是因为width: calc(100vw - 186px);空间是 186 像素，因为您已经使用calc并定位<div>了这样，每当菜单打开时，页脚就会向右移动 186 像素。

您正在将整个事情向右移动，从而产生了这个问题。

  • 您可以将菜单覆盖在内容上，以便内容将保留在其位置并在其上方打开菜单（而不是将内容向右移动）。

或者

  • 您可以使用在菜单打开时起作用的功能，它将页脚宽度减少 186 像素，当菜单关闭时，它会将页脚长度增加到原始大小

推荐阅读