如何动态渲染适合未知屏幕尺寸的最大数量的表行？苗条

Question

我对前端开发非常陌生。我有一个表，每行的高度为 52 像素。我想用尽可能多的行填充屏幕（并对不适合任意屏幕尺寸的其余部分进行分页）。

我知道我必须将一些元素大小除以 52 才能算出数量是多少。我不知道的是我在分子中使用哪个元素大小或元素差异来可靠地做到这一点。

我有窗口大小、导航栏大小，然后是主容器，我将在其中保存网站不断变化的内容。

我的预感是我可以只使用主容器大小，减去标题和底部页面选择栏的大小，然后我就有了可以用于我的条件的号码。

再次，我不确定这是否是一个可靠的方法。如果是的话，有什么办法可以用 svelte 本身来确定这些数字吗？就像

<svelte:window />

是如何工作的一样？还是我必须直接依赖 DOM？

这是迄今为止问题的屏幕截图：

Answer 1

你的“预感”是正确的。要用尽可能多的行填充屏幕，您可以执行以下操作：

  $: availableRows = Math.floor((windowHeight - headerHeight - pageSelectBarHeight) / rowHeight);