Div 高度在除第一个页面以外的页面中不会延伸

问题描述 投票:0回答:1

我将内容 div 高度设置为 100%,以便它延伸到页面末尾。它在第一页上效果很好。但是,如果内容很长,需要扩展到多个页面,则此属性似乎不适用于第一个页面以外的页面。

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="UTF-8">

  <style>
    @page {
        sheet-size: A4;
        margin-top: 40mm;
        margin-bottom: 20mm;

        odd-header-name: html_header;
        odd-footer-name: html_footer;
    }
  </style>
  
</head>

<body>

  <htmlpageheader name="header">
    <div style="background-color: yellow; height: 30mm; border:1px solid black; text-align: center;">
      <h1>Header</h1>
    </div>
  </htmlpageheader>

  <htmlpagefooter name="footer">
    <div style="background-color: yellow; height: 10mm; border:1px solid black;">
      <table width="100%" style="vertical-align: bottom; font-family: serif; font-size: 8pt; color: #000000; font-weight: bold; font-style: italic;">
        <tr>
          <td width="33%"></td>
          <td width="34%" align="center" style="font-weight: bold; font-style: italic;">Page {PAGENO} of {nbpg}</td>
          <td width="33%"></td>
        </tr>
      </table>
    </div>
  </htmlpagefooter>

  <div id="content" style="background-color: orange; border:1px solid black; height: 100%;">
    <p>1. Arsenal Football Club, established in 1886, is one of the most storied and successful football clubs in England. Based in Islington, North London, the club has a rich history characterized by numerous domestic and international achievements. Arsenal has won the English Premier League multiple times and boasts a significant number of FA Cup victories, making it one of the most decorated clubs in English football. The team's iconic red and white colors, along with its passionate fan base, contribute to its reputation as a formidable force in the sport.</p>
    <p>2. The club's home ground, the Emirates Stadium, opened in 2006 and has a seating capacity of over 60,000, providing a modern and vibrant atmosphere for supporters. Arsenal is known for its attacking style of play and has produced many legendary players, including Thierry Henry, Dennis Bergkamp, and Tony Adams, who have left an indelible mark on the club's legacy. The team's commitment to developing young talent through its academy has also been a hallmark of its philosophy, ensuring a continuous influx of skilled players.</p>
    <p>3. Arsenal's rivalry with clubs such as Tottenham Hotspur, known as the North London Derby, adds to the excitement of the Premier League. The club has a global following, with fans from various countries passionately supporting the team. As Arsenal continues to compete at the highest levels of English and European football, it remains dedicated to its core values of excellence, community engagement, and sportsmanship, striving to add more trophies to its illustrious history.</p>
    <p>1. Arsenal Football Club, established in 1886, is one of the most storied and successful football clubs in England. Based in Islington, North London, the club has a rich history characterized by numerous domestic and international achievements. Arsenal has won the English Premier League multiple times and boasts a significant number of FA Cup victories, making it one of the most decorated clubs in English football. The team's iconic red and white colors, along with its passionate fan base, contribute to its reputation as a formidable force in the sport.</p>
    <p>2. The club's home ground, the Emirates Stadium, opened in 2006 and has a seating capacity of over 60,000, providing a modern and vibrant atmosphere for supporters. Arsenal is known for its attacking style of play and has produced many legendary players, including Thierry Henry, Dennis Bergkamp, and Tony Adams, who have left an indelible mark on the club's legacy. The team's commitment to developing young talent through its academy has also been a hallmark of its philosophy, ensuring a continuous influx of skilled players.</p>
    <p>3. Arsenal's rivalry with clubs such as Tottenham Hotspur, known as the North London Derby, adds to the excitement of the Premier League. The club has a global following, with fans from various countries passionately supporting the team. As Arsenal continues to compete at the highest levels of English and European football, it remains dedicated to its core values of excellence, community engagement, and sportsmanship, striving to add more trophies to its illustrious history.</p>
    <p>1. Arsenal Football Club, established in 1886, is one of the most storied and successful football clubs in England. Based in Islington, North London, the club has a rich history characterized by numerous domestic and international achievements. Arsenal has won the English Premier League multiple times and boasts a significant number of FA Cup victories, making it one of the most decorated clubs in English football. The team's iconic red and white colors, along with its passionate fan base, contribute to its reputation as a formidable force in the sport.</p>
    <p>2. The club's home ground, the Emirates Stadium, opened in 2006 and has a seating capacity of over 60,000, providing a modern and vibrant atmosphere for supporters. Arsenal is known for its attacking style of play and has produced many legendary players, including Thierry Henry, Dennis Bergkamp, and Tony Adams, who have left an indelible mark on the club's legacy. The team's commitment to developing young talent through its academy has also been a hallmark of its philosophy, ensuring a continuous influx of skilled players.</p>
    <p>3. Arsenal's rivalry with clubs such as Tottenham Hotspur, known as the North London Derby, adds to the excitement of the Premier League. The club has a global following, with fans from various countries passionately supporting the team. As Arsenal continues to compete at the highest levels of English and European football, it remains dedicated to its core values of excellence, community engagement, and sportsmanship, striving to add more trophies to its illustrious history.</p>
  </div>

</body>

</html>
php html css mpdf
1个回答
0
投票

去除高度:100%;来自内容 div 并允许它根据内容采用自然高度。浏览器将自动处理跨多个页面的内容扩展。

© www.soinside.com 2019 - 2024. All rights reserved.