html - 如何在 NetSuite 中扩展一个 div 以填充整个模板页面(PDF)？-6ren

html - 如何在 NetSuite 中扩展一个 div 以填充整个模板页面(PDF)？

转载作者：行者123 更新时间：2023-11-28 01:12:22

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使其延伸到页脚？

最佳答案

检查 https://jsfiddle.net/u7reck5L/9/ 处的 fiddle .你可以看到紫色背景覆盖了整个空间，使用 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;
    }