Question

我想在我的一个项目中使用CSS Grid。我也有打印功能。

我在分页时遇到了一些麻烦。如果我为page-break-inside: avoid提供class，如果该类无法容纳在同一页面上，则会移至下一页。但是，如果它大于页面本身。它被截断（图片中的页脚类）。

这就是我的HTML文件的样子 -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample For New CSS Grid Layout</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
  <div class="wrapper">
    <div class="header">
      A Header
    </div>
    <div class="name">
      <img class="name-child name-image" src="default_user.png"></img>
      <div class="name-child">LastName1234, FirstName1234</div>
    </div>
    <div class="menu">
      <p>
      Pellentesque sed diam erat. Etiam porttitor luctus orci eu mattis.
      Morbi et magna ut leo placerat vestibulum. Donec at enim at nisl convallis congue.
      Morbi fringilla dui leo, quis laoreet ligula cursus sit amet.
      Nunc pharetra pretium libero, eget bibendum odio volutpat eget.
      Ut vel porttitor nisi. Phasellus in pulvinar sapien, vel iaculis turpis.
      Duis et neque ut tortor ornare lacinia faucibus ac magna.
      </p>
    </div>
    <div class="main-content-title">
      <div class="main-content-title-text">Summary 2018</div>
      <button class="main-content-title-button">Print</button>
      <button class="main-content-title-button">Questions</button>
    </div>
    <div class="main-content">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
    </div>
    <div class="footer-title">Available online at www.abc.xyz</div>
    <div class="footer">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis eget mi nec lorem iaculis scelerisque. Suspendisse potenti.
      Praesent finibus, elit ut tempus consectetur, velit metus fermentum neque,
      blandit facilisis nunc tortor elementum metus. Ut facilisis posuere turpis in 
      feugiat. Ut ullamcorper urna ut euismod malesuada. Ut est sapien, 
      lacinia non egestas et, scelerisque id nunc. Vivamus ac nunc sit amet leo sagittis
      dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
      per inceptos himenaeos.
      </p>
    </div>
  </div>
</body>
</html>

CSS文件看起来像这样 -

.wrapper {
  max-width: 1800px;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper .main-content-title {
  display: flex;
  justify-content: flex-end;
}

.wrapper .main-content-title-text {
  margin-right: auto;
}

.wrapper .name {
  display: flex;
  flex-direction: row;
}

.wrapper .name > :first-child {
  margin-left: 0px !important;
}

.wrapper .name .name-child {
  margin-left: 5px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 60px 60px 60px auto auto 30px;
  grid-gap: 10px;
}

.wrapper > :nth-child(2) {
  margin-top: -10px;
}

.wrapper .header {
  grid-column: 1 / 13;
  grid-row: 1 / 2;
}

.wrapper .name {
  grid-column: 1 / 13;
  grid-row: 2 / 3;
}

.wrapper .menu {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}

.wrapper .main-content-title {
  grid-column: 3 / 9;
  grid-row: 3 / 4;
}

.wrapper .main-content {
  grid-column: 3 / 9;
  grid-row: 4 / -1;
}

.wrapper .footer-title {
  display: none;
}

.wrapper .footer {
  grid-column: 9 / 13;
  grid-row: 3 / -1;
}

@media (max-width: 1400px) {
  .wrapper .menu {
    grid-column: 1 / 3;
    grid-row: 3 / -1;
  }

  .wrapper .main-content-title {
    grid-column: 3 / 9;
    grid-row: 3;
  }

  .wrapper .main-content {
    grid-column: 3 / 9;
    grid-row: 4 / 5;
  }

  .wrapper .footer {
    grid-column: 3 / 9;
    grid-row: 5 / -1;
  }
}

/*@media print {
  .wrapper {
    max-width: 1800px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .wrapper .menu {
    display: none;
  }

  .main-content-title-button {
    display: none;
  }

  .footer {
    display: flex;
    flex-direction: column;
  }

  .footer::before {
    content: "Available online at www.abc.xyz";
  }
}*/
@media print {
  .wrapper {
    grid-template-rows: 60px 60px auto 30px auto
  }

  .wrapper .main-content-title {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }

  .wrapper .name {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
  }

  .wrapper .main-content {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
  }

  .wrapper .footer-title {
    grid-column: 1 / -1;
    grid-row: 4 / 5;
  }

  .wrapper .footer {
    grid-column: 1 / -1;
    grid-row: 5 / 6;
  }

  /*.wrapper .footer::before {
    content: "Available online at www.abc.xyz";
  }*/

  .wrapper > :nth-child(2) {
    margin-top: 0px !important;
  }

  .wrapper .header {
    display: none;
  }

  .wrapper .name .name-image {
    display: none;
  }

  .wrapper .main-content-title .main-content-title-button {
    display: none;
  }

  .wrapper .menu {
    display: none;
  }

  .wrapper .footer-title {
    display: unset !important;
  }

  .wrapper .footer-title {
    page-break-after: always;
  }

  .wrapper .footer {
    page-break-inside: avoid;
  }


}

该页面如下所示 -

打印预览看起来像这样 -

我有一些问题（打印） -

如果footer位于第2页，且其内容大于打印的单页，请如何使其跨越第2页和第3页。
如果main-content本身较大且部分内容转到第2页且footer小到足以放在同一页面上，我该怎么做。

CSS Grid中的分页打印

0 个答案: