Question

在FreeMarker模板页面中有一个页眉和一个页脚。

我想在页眉和页脚之间插入一个div。

并且div必须扩展到页脚。

代码如下：

<?xml version="1.0"?>
<!DOCTYPE pdf PUBLIC "-//big.faceless.org//report" "report-1.1.dtd">
<pdf>
    <head>
        <macrolist>
             <macro id="nlheader">
                 <table style="width: 100%; font-size: 10pt; position:fixed">
             </macro>
             <macro id="nlfooter">
                <table class="footer" style="width: 100% ;position:fixed">
             </macro>
        </macrolist>
    </head>
    <body header="nlheader" header-height="10%" footer="nlfooter" footer-height="65pt" padding="0.5in 0.5in 0.5in 0.5in" size="Letter">
    <table>
        <tr>
            <td>Here is a table</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
               <div id="extend_div"></div>
            </td>
        </tr>
    </body>
</pdf>

HTML标记的高度在FreeMarker模板中似乎无效。

我想使用JavaScript来检测表格的高度，但这似乎也是无效的。

如何配置div以使其扩展到页脚？

Answer 1

检查https://jsfiddle.net/u7reck5L/9/的小提琴。您可以看到紫色背景覆盖了整个空间，请使用flex属性。

<div class="starter">
    <header>
      This is Hweader
    </header>
    <div class="main-wrapper">
          <h1>
           This is content 
          </h1>
    </div>
    <footer>
          This is footer
     </footer>
    </div>
    html, body {
        height: 100%;
    }
    header, footer {
      height:30px;
    }
    .starter {
        display: flex;
        height: calc(100% - 30px);
        flex-direction: column;
    }
    .main-wrapper {
        background-color: #8723FF;
        position: relative;
        flex: 1 0 auto;
    }

在NetSuite中，如何扩展div以填充整个模板页面（PDF）？

1 个答案: