放大和缩小后的分页符

Question

我建立了一个响应式网站，在桌面上 - 每当用户放大时，首先将其更改为平板电脑，但这不是主要问题 - 当我再次缩小时，整个页面布局中断。

我发现它发生了，因为我的主包装div（包装了body标签的全部内容）已经应用了if(MenuFlyout.GetAttachedFlyout(MyGrid).IsOpen) { // do something } ，我用它来隐藏未显示的菜单和幻灯片。 / p>

任何想法如何解决？

Answer 1

尝试将溢出更改为自动并将菜单的最大高度更改为 calc(100vh - 64px) 或 calc(100vw - 64px) 以获取最大宽度

body {
  overflow: auto;
}
.menu, .slides {
  max-width: calc(100vw - 64px);
  max-height: calc(100vh - 64px);
}