Question

我尝试使用HTML创建一个文档，当它打印出来时，添加一个封面页面＆＃39;带边框。我有一个div只能用@media打印＆＃39;但我无法弄清楚如何让div填满页面。使用position：absolute设置100％的高度填充整个文档，而不仅仅是那一页。

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

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

Answer 1

如果你这样做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，则无法提供更多帮助。

Answer 2

将html和body的高度设置为100％，然后将封面高度设置为100％，以获得基于视口的封面高度。给盖子一个绝对的位置并定位它。

body, html { height: 100%;
}

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

如何使div填充当前页面

2 个答案: