所以我的问题非常简单。我正在创建一个报告，大致可以是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>