问题

我正在制作一个用于打印的多页HTML文档，具体针对A4纸张大小的CSS布局。布局效果很好，但我面临的问题是我应用的边距导致每页内容周围出现了不需要的白色区域。我的目标是移除这个白色区域，使背景颜色扩展到整个页面，包括边距。

CSS 代码：
```css
@page {
  size: A4;
  margin: 1cm;
}

body {
  background-color: var(--bg);
}

.page {
  width: 21cm;
  min-height: 29.7cm;
}

当前结果：
当前输出将内容显示在A4大小的页面中央，并在其周围添加了1厘米的边距。然而，这个边距在每一页的内容周围创建了一个不需要的白色区域，如下图所示：

期望的结果：
我希望实现一个打印输出，其中背景颜色扩展到整个页面，包括边距区域。这意味着应移除围绕内容的白色区域，背景颜色应覆盖整个页面，而内容仍然居中于页面中。

我的尝试：
我尝试过调整CSS属性，包括设置边距和填充，以移除内容周围的白色区域，并使背景颜色扩展到整个页面。然而，这些尝试没有产生期望的结果。

如果有人遇到类似问题或知道如何实现期望的结果，我将非常感激任何见解或替代方法。提前感谢您的帮助！

<details>
<summary>英文:</summary>

I am working on a multi-page HTML document with CSS for printing, specifically targeting the A4 page size. The layout works fine, but the issue I&#39;m facing is that the margin I&#39;ve applied results in an unwanted white area around the content on each page. My goal is to remove this white area and have the background color extend to the full page, including the margin.

CSS Code:
```css
@page {
  size: A4;
  margin: 1cm;
}

body {
  background-color: var(--bg);
}

.page {
  width: 21cm;
  min-height: 29.7cm;
}

Current Outcome:
The current output displays the content centered within an A4-sized page with a 1cm margin around it. However, this margin creates an unwanted white area around the content on each page, as seen in the following image:

Desired Outcome:
I want to achieve a printed output where the background color extends to the full page, including the margin area. This means that the white area around the content should be removed, and the background color should cover the entire page, while the content remains centered within the page.

What I've Tried:
I have attempted to adjust the CSS properties, including setting margins and padding, to remove the white area around the content and have the background color extend to the full page. Unfortunately, these attempts have not yielded the desired outcome.

If anyone has encountered a similar issue or knows how to achieve the desired result, I would greatly appreciate any insights or alternative approaches. Thank you in advance for your help!

答案1

得分: 3

有很多原因说明为什么打印整个页面的浅色背景是一个不好的主意：

• 许多打印机不能简单地打印到页面的边缘。
• 许多打印机不能很好地打印均匀的浅色。
• 这浪费了墨水。用户可能不满意这一点，然后在他们的打印机设置中关闭背景。

那么，怎么办呢？解决方案非常简单：在打印时将背景颜色设置为白色。可以使用CSS来实现：

body {
  background-color: var(--bg);
}

@media print { 
  body { 
    background-color: white; 
  }
}

这不会影响在浏览器中查看页面时的背景颜色。

您可以添加任何其他所需的CSS规则。参见：@media。

body {
  background-color: var(--bg);
}

@media print { 
  body { 
    background-color: white; 
  }
}

答案2

得分: 0

修改后的CSS文件：

body {
  /* 直接在body元素上设置背景颜色 */
  background-color: var(--bg);

  /* 使用box-shadow创建内容周围的有颜色的“边框” */
  box-shadow: 0 0 0 100vmax var(--bg);
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  /* 在页面内居中内容 */
  margin: 0 auto;
}

通过使用box-shadow属性，您可以避免不必要的白色。

    body {
      /* Set the background color directly on the body element */
      background-color: var(--bg);
    
      /* Use box-shadow to create a colored "border" around the content */
      box-shadow: 0 0 0 100vmax var(--bg);
    }

.page {
  width: 21cm;
  min-height: 29.7cm;
  /* Center the content within the page */
  margin: 0 auto;
}