如何使单个div的内容在打印时填满整个页面 [英] How to make single div with contents to fill entire page when printed

问题描述

我有一个aurela应用程序，需要能够打印出标签.在带有表单的页面上，有一个隐藏的div，其中包含标签的布局.我只想打印隐藏的div，并且我希望它被拉伸(带有内容)以使页面在横向尺寸上足够大.目前，它仅占页面的一小部分.

I have an aurela app that needs to be able to print out labels. On the page with the form there is a hidden div that contains the layout of the label. I want to print only the hidden div and i want it to be stretched(with content) to be ful size of the page in landscape. Currently it only fills a small corner of the page.

JSFiddle 标签

JSFiddle Label

这是我尝试使其工作的CSS.奇怪的是，对@page的更改无济于事.我尝试了不同的页面大小，但没有影响div，它仍然位于一个角落.

This is the CSS i have tryed to get it working. Weird thing is changes to the @page does nothing. I tryed different page sizes but nothing affects the div, it still sits in the one corner.

    @media print {
  header, footer, .print-hidden {
    visibility: hidden;
  }

  @page {
    size: auto;
    margin: 0mm;
  }

  html, body {
    height: 100%;
    width: 100%;
  }

  .print-show{
    display: block;

    position: absolute;

    width: 100vw;
    height: 100vh;
    top:0;
    bottom:0;
  }
}

这是标签的aurelia模板

This is the aurelia template for the label

<template bindable="firstname, lastname, company, inviter, uniquecode">
<div class="label-container">
<div class="row justify-content-start mx-0 px-1 pt-1">
    <div class="text-center">
        <img class="label-logo" src="image.png">
        <div class="visitor-logo">VISITOR</div>
    </div>
</div>
<div class="flex-row text-center label-name">
    <div>${firstname}</div>
    <div>${lastname}</div>
</div>
<div class="text-center label-company">
    ${company}
</div>
<div class="row justify-content-between mx-0 px-1">
    <div>
        <div class="label-guestof">Guest of</div>
        <div class="label-inviter">${inviter}</div>
    </div>
    <span>${uniquecode}</span>
</div>
</div>

这是标签的自定义CSS类:

And here are the custom css classes for the label:

    .label-container{
  width: 350px;
  height: 188px;
}

.visitor-logo{
  font-weight: normal;
  font-size: 15px;
  color: #505659;
}

.label-name{
  font-weight: 600;
  font-size: 28px;
  color: #2B3033;
}

.label-company{
  font-weight: normal;
  font-size: 12px;
  color: #737B80;
}

.label-guestof{
  font-weight: normal;
  font-size: 10px;
  color: #737B80;
}

.label-inviter{
  font-weight: 600;
  font-size: 12px;
  color: #505659;
}

.label-logo{
  height: 28px;
  width: 60px;
}

推荐答案

我重新设置了样式并添加了背景色以进行更好的检查.我希望这是您要寻找的.如果不是的话，这样做是很有趣的:P.

I restyled it a little bit and added a background color for a better check. I hope this is what you're seeking. If not is was kinda fun to do it :P.

<!--index.html-->
<div class="label-container">
  <div class="label-container__header mx-0 px-1 pt-1">
    <div class="text-center">
      <img class="label-logo" src="image.png">
      <div class="visitor-logo">VISITOR</div>
    </div>
  </div>
  <div class="label-container__names label-name">
    <div>${firstname}</div>
    <div>${lastname}</div>
  </div>
  <div class="label-container__company label-company">
    ${company}
  </div>
  <div class="label-container__footer justify-content-between mx-0 px-1">
    <div>
      <div class="label-guestof">Guest of</div>
      <div class="label-inviter">${inviter}</div>
    </div>
    <span>${uniquecode}</span>
  </div>
</div>

---

// style.css
html, body {
  height: 100%;
  width: 100%;
}

.label-container {
  width: auto;
  height: 100%;
  background-color: #aaa;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.label-container__header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.label-container__names {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label-container__company {
  display: flex;
  justify-content: center;
}

.label-container__footer {
  display: flex;
  justify-content: flex-end;
}

.visitor-logo{
  font-weight: normal;
  font-size: 15px;
  color: #505659;
}

.label-name{
  font-weight: 600;
  font-size: 28px;
  color: #2B3033;
}

.label-company{
  font-weight: normal;
  font-size: 12px;
  color: #737B80;
}

.label-guestof{
  font-weight: normal;
  font-size: 10px;
  color: #737B80;
}

.label-inviter{
  font-weight: 600;
  font-size: 12px;
  color: #505659;
}

.label-logo{
  height: 28px;
  width: 60px;
}

这篇关于如何使单个div的内容在打印时填满整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！