如何防止行 CSS 网格重叠？

Question

我刚开始使用 css 网格。我正在尝试在网络浏览器中阅读 pdf，其中每个页面都呈现在一个新的 canvas 元素中。 Canvas 元素根据 pdf 文件中的页数动态添加。我正在使用网格显示，但不同的页面（canvas 元素）出现重叠，如下所示： overlapped messed up rows

这是我的 HTML:

<div class="pdfHolder" id="pdfHolder">
    <canvas id="cvsPg1" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg2" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg3" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg4" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg5" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg6" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg7" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg8" class="canvasPage" height="1052" width="743"></canvas>
</div>

这里是对应的CSS:

.pdfHolder {
    display: grid;
    min-width: 500px;
    background: #eee;
    padding: 10px;
    overflow: scroll;
    border: 1px solid black;
    margin-left: -1px;
}

.canvasPage {
    border: 1px solid black;
}

如果我不使用 pdfHolder 元素的网格显示，结果很好（一个接一个地滚动 8 canvas 个元素的列表）。如果我添加 grid-auto-rows: 1100px; 即显式设置行高，它就可以工作。但是现在我看到 canvas 元素之间有很大的差距：big gap

我怀疑它是否每次都能正常工作（例如在不同的屏幕上等，或者与另一个页面大小不同的 pdf 等）。有没有办法根据 canvas 高度隐式设置行高？

Answer 1

您的 canvas 有 height="1052" 您尝试使用 grid-auto-rows: 1052px; 或 grid-auto-rows: max-content; 和 gap: 0;

如何防止行 CSS 网格重叠？

How do I prevent overlap of rows CSS grid?

html

css

canvas