HTML溢出打印问题
所以我的问题很简单。我正在创建一个报告，可以是一到100页左右。它是基于多个因素而变化的。我遇到的问题是，我需要在每一页上设置页脚。我可以把页脚放在我需要的地方，然后看着我想要的样子。但是，我用来在页脚后面显示内容溢出的div。所以我的问题是，如何让任何不适合content div的内容在下一页溢出，而不仅仅是填充可打印的空间？这可能吗HTML溢出打印问题,html,css,overflow,Html,Css,Overflow,所以我的问题很简单。我正在创建一个报告，可以是一到100页左右。它是基于多个因素而变化的。我遇到的问题是，我需要在每一页上设置页脚。我可以把页脚放在我需要的地方，然后看着我想要的样子。但是，我用来在页脚后面显示内容溢出的div。所以我的问题是，如何让任何不适合content div的内容在下一页溢出，而不仅仅是填充可打印的空间？这可能吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g
<!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">Text ...</div>
<div class="whiteBox" style="width: 217mm; border: none">Text ...</div>
<div class="whiteBox" style="width: 217mm; border: none">Text ...</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>
身体{
背景色：#fff；
边际：0px；
高度：278mm；
边缘底部：20毫米；
}
.第页{
宽度：217mm；
高度：268mm；
}
页脚{
底部：0；
高度：10mm；
背景：黑色；
颜色：白色；
宽度：200mm；
位置：固定；
}
.白盒子{
最小高度：5mm；
高度：自动；
字号：3mm；
线高：2；
左边框：1px实心#a95346；
边框底部：1px实心#a95346；
颜色：#000；
字母间距：0.1mm；
浮动：左；
显示：内联块；
文本对齐：居中；
}
.内容{
宽度：217mm；
高度：250毫米；
字体系列：“Verdana”；
显示：内联块；
背景：#fff；
浮动：左；
}
.pb{
前分页符：始终；
}
@媒体印刷品{
身体{
背景色：#fff；
边际：0px；
高度：278mm；
边缘底部：20毫米；
}
.第页{
宽度：217mm；
高度：268mm；
}
页脚{
底部：0；
高度：10mm；
背景：黑色；
颜色：白色；
宽度：200mm；
位置：固定；
}
.白盒子{
最小高度：5mm；
高度：自动；
字号：3mm；
线高：2；
左边框：1px实心#a95346；
边框底部：1px实心#a95346；
颜色：#000；
字母间距：0.1mm；
浮动：左；
显示：内联块；
文本对齐：居中；
}
.内容{
宽度：217mm；
高度：250毫米；
字体系列：“Verdana”；
显示：内联块；
背景：#fff；
浮动：左；
}
.pb{
前分页符：始终；
}
}
文本。。。
文本。。。
文本。。。
发帖人：Hege Refsnes