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

【问题标题】：In NetSuite, how to extend a div to fill the whole template page(PDF)?在 NetSuite 中，如何扩展一个 div 以填充整个模板页面（PDF）？
【发布时间】：2018-08-27 06:17:23
【问题描述】：

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

【问题讨论】：

你应该使用这个简单的技巧：#extend_div{height: 100vh;}

标签： html css layout freemarker html-heading

【解决方案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;
    }

【讨论】：

好像不支持CSS3。
我不确定你想说什么，flex 和 calc 都是 CSS3。你不能使用 CSS3，这是你关心的问题吗？
是的，'NetSuite'系统好像不支持CSS3，也就是说，CSS3好像没有生效。