1

我有一个应用了这个 styleCLass 的面板的视图。

.scrollPanel { 宽度：100%; 高度：375px；溢出：自动；}

该面板嵌套了扩展页面应用程序控件。

我想要设置面板​​的高度和宽度，以便显示面板的滚动条并且不激活浏览器滚动条。

这个 CSS 非常适合宽度。我可以调整浏览器窗口的大小，面板的宽度会根据需要进行调整，并且浏览器水平滚动条永远不会出现。

但是如果我尝试 100% 的高度，它就不会起作用。如果我调整高度大小，则会出现浏览器的垂直滚动条。

此外，最好让面板的高度始终等于可用屏幕的高度。使用 100% 时，如果视图折叠，高度会非常小。视图扩展时高度会扩展。我希望它始终与浏览器的可用高度保持相同的大小百分比。

PS 我设置的 375 大小可以完美地工作，但它不会随浏览器调整大小。

有没有办法做到这一点？

4

1 回答 1

0

您需要注册一个 window.onresize 事件来获取窗口的实际大小并相应地修改面板，例如通过使用样式设置其高度。

因此，最好的方法是创建一个根据窗口大小修改面板大小的方法，同时考虑最小值和最大值。一旦该功能完成，您只需将其注册到 onresize 事件，该事件会在任何更改视口显示尺寸（读取、实际调整大小或启用 Windows 滚动条的东西）时触发。

在完美的世界中，您最多可以每 100 毫秒对该方法的执行进行去抖动/限制，以避免在使用鼠标和窗口边框调整窗口大小期间出现过多的 CPU 负载，因为根据浏览器的不同，该事件会在每一个上触发在这种调整大小期间鼠标移动的像素 - 这是相当常见的，可能会导致 UI 响应变慢。

于 2013-02-26T15:38:35.960 回答