html - 基于页面高度使用css分页

Question

我有一个要打印的动态列表，我需要在到达 A4 大小的末尾时设置分页，而不是像示例那样到达表格的末尾。

是否可以根据页面高度设置分页符？

其实我有:

@page 
{
   size: A4;
   margin: 0;
   page-break-before: always; 
}

@media print 
{
 .page 
  {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
    position: relative;
}

 .page-break    
 { 
    display: block; 
    page-break-before: always;
 }
}

动态 View 由两个具有动态行的表组成，所以我永远不知道在哪里“剪切”页面:

<div class="page">

    @foreach(var dme in Model)
    {
        <table class="dme-table">
             <tr>
                 <th class="titulo" colspan="4">DME</th>
              </tr>
              <tr>
               <th class="dme-table-num-th">Número</th>
                    <th>Data</th>
                </tr>
                <tr>
                    <td>@Html.DisplayFor(model => dme.Numero)</td>
                </tr>
            </table>

            <table class="carga-table">
                <tr>
                    <th>Cargas</th>
                </tr>
                <tr>
                    <th class="marcas">Marcas</th>
                </tr>

                @foreach(var carga in dme.Cargas)
                {
                    <tr>
                        <td>@Html.DisplayFor(model => carga.Marcas)</td>
                    </tr>
                 }
            </table>

        </div>

        <div class="page-break"></div>
    }
</div>

有什么想法吗？

谢谢

Answer 1

我不会打扰 - 不同的用户会有不同的字体堆栈、纸张大小(认为合法是各州的标准)。现代浏览器可能会做得更好，所以让他们吧。

Chris Coyer 有一个 good screencast关于打印样式表的基本使用，如果你还没有看过它(你可以跳过第一个 09:30，因为它主要是华夫饼)。