В NetSuite, как расширить div, чтобы заполнить всю страницу шаблона (PDF)? - PullRequest
Новая
       28

В NetSuite, как расширить div, чтобы заполнить всю страницу шаблона (PDF)?

0 голосов
/ 27 августа 2018

На странице шаблона 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, чтобы он распространялся на нижний колонтитул?

1 Ответ

0 голосов
/ 27 августа 2018

Проверьте скрипку на 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;
    }
...