html - 如何让一个div充满当前页面

Question

我正在尝试使用 HTML 创建一个文档，当它被打印时，会添加一个带边框的“封面”。我有一个仅在“@media print”下可见的 div，但我不知道如何让该 div 填充页面。使用 position: absolute 设置 100% 的高度会填满整个文档，而不仅仅是那一页。

有没有办法将 div 的大小限制为仅当前页面？当我尝试 position: fixed 时，它确实把它放在了正确的位置，但在每一页上。本质上，我需要找到一种方法将高度设置为视口(viewport)高度，但保持 position: absolute。

为此，我只能使用与 IE8 兼容的解决方案。

Answer 1

为您的 html 和 body 设置 100% 的高度，然后为 cover 设置 100% 的高度，以获得基于视口(viewport)的 cover 高度。也给封面一个绝对的位置并定位它。

body, html { height: 100%;
}

#cover { position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}