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

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


html layout css freemarker html-heading
person skyclouder    schedule 27.08.2018    source источник
comment
Вы должны использовать этот простой трюк: #extend_div{height: 100vh;}   -  person Evince Development    schedule 27.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Проверьте скрипт на 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;
    }
person Charu Maheshwari    schedule 27.08.2018
comment
Кажется, не поддерживает CSS3. - person skyclouder; 27.08.2018
comment
Я не уверен, что вы пытаетесь сказать, flex и calc оба являются CSS3. Вы не можете использовать CSS3, вас это беспокоит? - person Charu Maheshwari; 27.08.2018
comment
Да, система «NetSuite», похоже, не поддерживает CSS3, другими словами, CSS3, похоже, не действует на нее. - person skyclouder; 27.08.2018