如何使div填充当前页面

我试图创建一个使用HTML的文档，当它打印时，添加一个带有边框的'封面'。我有一个只能用'@media print'显示的div，但我无法弄清楚如何让该div填充页面。使用绝对位置设置100％的高度，绝对填充整个文档，而不仅仅是一页。如何使div填充当前页面

有没有办法将div的大小限制在当前页面？当我尝试职位：固定，它确实把它放在正确的地方，但在每一页。实质上，我需要找到一种方法将高度设置为视口高度，但保持位置：绝对。

为此，我仅限于与IE8兼容的解决方案。

来源

2014-10-31 Flynn1179

你可以在这里解释页面和文档之间的区别吗？ – charles 2014-10-31 12:12:12

简而言之，一个文档有多个页面，使用'div.section {page-break-before：always; }'。 – Flynn1179 2014-10-31 12:15:16

因此，您希望同时在页面上加载多个页面的内容，但一次只能查看一个视图？我假设你的问题是你正在覆盖某种UI功能？任何jsfiddle和/或图像来显示你期望发生什么？ – charles 2014-10-31 12:18:47

如果你做一个div#cover这样的：

#cover { 
    background-color: red; 
    position: absolute; 
    border:3px solid blue; 
    box-sizing: border-box; 
    top:0; 
    left:0; 
    bottom: 0; 
    right: 0; 
    display: none; 
} 

@media print 
{ 
    #cover {display: block; } 
}

你的第一页为红色，蓝色边框（或任何包含在div）

的top，left，right，bottom使其适合视口。

box-sizing使边框尺寸合并在div内容宽度/高度。

如果没有您的HTML，不可能比此更进一步。

来源

2014-10-31 13:29:17 Luizgrs

给你的HTML和身体100％的高度，然后覆盖100％的高度来获得基于视口的封面高度。给封面一个绝对位置，并将其定位。

body, html { height: 100%; 
} 

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

来源

2014-10-31 16:53:33 chdltest

如何使div填充当前页面

回答

相关问题