使用 CSS 打印布局拉伸项目以填充页面

Question

我正在使用 HTML/CSS 设计一个测验。它旨在打印在纸上。

目前看起来像这样：

最初，问题框在分页符处被分成两半，但我设法避免了这种情况

.questionBox {
  break-inside: avoid;
}

现在，我有一个更雄心勃勃的目标：我想通过拉长每个问题框使它们都更高，从而避免浪费每个页面底部的空间。这应该动态完成，有点类似于 flexbox 如何水平拉伸元素以使用 flex-grow 填充空间。

我使用 flexbox 和 flex-direction: column 做了一些尝试，但到目前为止还没有运气。有什么建议吗？

Answer 1

调整 height 属性以将 .questionBox div 拉伸到全高。

.questionBox {
    height: 100vh;
}

高度：100vh = 视口高度的 100%。