HTML溢出打印问题

时间:2017-05-31 16:39:09

标签: html css overflow

所以我的问题非常简单。我正在创建一个报告,大致可以是1到100页。它基于多种因素而变化。我遇到的问题是我需要在每个页面上设置页脚。我可以让页脚坐到我需要它的地方,看看我想要的样子。但是,我用来显示我的内容的div在我的页脚后面溢出。所以我的问题是如何在内容div中不适合任何内容div的内容溢出到下一页而不是简单地填充可打印空间?这有可能吗?

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
          <style>
          body {
            background-color: #fff;
            margin: 0px;
            height: 278mm;
            margin-bottom: 20mm;
          }
          .page {
            width: 217mm;
            height: 268mm;
          }
          footer {
            bottom: 0;
            height: 10mm;
            background: black;
            color: white;
            width: 200mm;
            position: fixed;
          }
          .whiteBox {
            min-height: 5mm;
            height: auto;
            font-size: 3mm;
            line-height: 2;
            border-left: 1px solid #a95346;
            border-bottom: 1px solid #a95346;
            color: #000;
            letter-spacing: 0.1mm;
            float: left;
            display: inline-block;
            text-align: center;
          }
          .content {
            width: 217mm;
            height: 250mm;
            font-family: 'Verdana';
            display: inline-block;
            background: #fff;
            float: left;
          }
          .pb {
            page-break-before: always;
          }
          @media print {
            body {
              background-color: #fff;
              margin: 0px;
              height: 278mm;
              margin-bottom: 20mm;
            }
            .page {
              width: 217mm;
              height: 268mm;
            }
            footer {
              bottom: 0;
              height: 10mm;
              background: black;
              color: white;
              width: 200mm;
              position: fixed;
            }
            .whiteBox {
              min-height: 5mm;
              height: auto;
              font-size: 3mm;
              line-height: 2;
              border-left: 1px solid #a95346;
              border-bottom: 1px solid #a95346;
              color: #000;
              letter-spacing: 0.1mm;
              float: left;
              display: inline-block;
              text-align: center;
            }
            .content {
              width: 217mm;
              height: 250mm;
              font-family: 'Verdana';
              display: inline-block;
              background: #fff;
              float: left;
            }
            .pb {
              page-break-before: always;
            }
          }
        </style>
      </head>
      <body>
        <div class="page" style="border: 1px dotted;">
          <div class="content" style="border: none">
            <div class="whiteBox"   style="width: 217mm; border: none;">
              <div class="whiteBox" style="width: 217mm; border: none;">pylori organisms is negative. 2. Microscopic examination reveals gastric cardiac mucosa with chronic inflammation. Intestinal metaplasia and dysplasia are not identified.</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">pylori organisms is negative. 2. Microscopic examination reveals gastric cardiac mucosa with chronic inflammation. Intestinal metaplasia and dysplasia are not identified.</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
              <div class="whiteBox" style="width: 217mm; border: none">The noble motors the considerate enthusiasm over the coverage. Does the sky rest? A hospital speculates across the acid. The task laughs throughout the elevator! How does the associate seat squash the varied sod?</div>
            </div>
          </div>
          <div class="pb"></div>
          <div class="whiteBox" style="width: 217mm; border: none;">
            <footer>
              <p>Posted by: Hege Refsnes</p>
            </footer>
          </div>
        </div>
      </body>

    </html>

0 个答案:

没有答案