Guide on stretching a div to cover the entire template page in NetSuite PDFs

In a FreeMarker template page, you will find one header and one footer.

If you want to add a div between the header and footer that extends all the way down to the footer, you can use the following code:

<?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>

Unfortunately, the height attribute of HTML tags doesn't work as intended in FreeMarker templates. Additionally, using JavaScript to detect the height of tables may also not give accurate results.

To make sure your div extends to the footer, consider adjusting CSS properties or using specific positioning methods.

htmlcsslayoutfreemarkerhtml-heading

Answer №1

Take a look at the demonstration on this JSFiddle link. The entire space is covered with a purple background using the flex property.

<div class="starter">
    <header>
      This is Header
    </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;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate any empty spaces and gaps present between div elements

Is there a way to eliminate the spaces between div containers at the bottom part of the div with a red border? The following code snippets utilize materializecss. /*############################ LOGIN STYLE ############################*/ body{ font: ...

htmlcssmaterialize

Add inline CSS to the <html> element using TypeScript when clicked on

My experience with TypeScript is still new, and I recently found myself confused when trying to apply inline CSS to a tag on click. I initially thought it would be simple, but in TypeScript, things seem to work differently. I attempted to use document.quer ...

javascripthtmlcsstypescript

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

javascripthtmlhtml5-audioweb-audio-api

Getting checkboxes from an HTML form in Django: A comprehensive guide

I am trying to create a form that displays checkboxes for each item in a list. Here is the structure of my form: <form action="/test"> <ul style="font-size:30px"> {% for d in Dlist %} <li type="none"><input typ ...

pythondjangohtmlformsdjango-forms

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

javascriptjqueryhtmlcssdatatable

Obtain the VW/VH coordinates from an onclick action in JavaScript

With this code snippet, you'll be able to retrieve the x and y coordinates of a click in pixels: document.getElementById("game").addEventListener("click", function(event) { console.log(event.clientX, event.clientY); }); However ...

javascriptcssdomaddeventlistenerviewport-units

Exploring the possibilities of applying CSS to customize the color of various elements

Is there a way to set the color of elements in CSS so that it applies to everything such as fonts, borders, and horizontal rules when applied to the body? How can I accomplish this effectively? ...

htmlcsscolors

:first-child Pseudo-class Selecting Wrong Element

I've created a website with the following HTML code: <article> <p>Header</p> <p>Some content</p> </article> My goal is to make the 'header' text appear in bold. To achieve this, I referred to W3S ...

htmlcsscss-selectors

Transferring information from a Form to various web pages using a single JavaScript source file

After successfully creating a basic login page with hardcoded credentials, I faced a challenge. While I could transition to the next page once the user logs in, I struggled to display the username entered on the first page onto the second page. I attempte ...

javascripthtml

Display a div based on search results

I recently encountered an issue with a script that needs modification to display different divs based on search criteria. Originally, I used this script for a contact list but now need it to perform another function. View the original code (JSFiddle) Here ...

javascriptjqueryhtml

The Jquery image on.load event seems to only function properly after performing a manual hard refresh of

Looking for a solution to replace loading text with a button only after the image has loaded onto the page. Utilizing on.load as follows: $('img.house').on('load', function() { $('.loading').hide(); $('# ...

jqueryhtmlcss

Identifying page dimensions and implementing CSS adjustments when the width decreases to less than 500 pixels

I'm working on a website and I need to create a script that can detect when the page width is greater than 500px or less than 500px so I can adjust the layout accordingly. At the bottom of the page, there are some links arranged like a footer. When th ...

javascriptjqueryhtmlcsswidth

Collapse the accordion when opening another accordion that belongs to a different parent

I am currently working with an accordion setup that you can view here: https://jsfiddle.net/n4tmjaqd/1/ I am looking for guidance on how to modify the function so that when either tab 2 or tab 3 opens, tab 1 closes (and vice versa). Tab 1 has a different ...

javascripthtmlcssfunctionaccordion

What is the best way to open up a parent CSS accordion when the child accordion's border is covering the parent's border?

Exploring Options and Background https://example.com/jsfiddle I have been experimenting with creating an expandable/collapsable accordion for displaying restaurant food choices, envisioning a digital menu akin to Just-Eat or Hungry House. My attempt inv ...

javascriptjqueryhtmlcssaccordion

Organizing HTML elements based on their class names, especially when an element has multiple classes assigned

Hey there, I've been working on an artist page that showcases multiple artists, each with a portfolio image and some detailed information. My goal is to have buttons at the top of the page that, upon clicking, will sort the artists displayed. To achi ...

javascriptjqueryhtmlcssweb-frontend

css displaying inconsistently on Mi Browser mobile view

Everything looks great in Chrome (mobile), but for some reason when I test it out on Mi Browser, the CSS isn't displaying correctly. I'm working with Next.js and here's a snippet from my head tag: <Head> <meta charSet="UTF-8&q ...

htmlcssnext.jsmobile-browserxiaomi

Is it possible to enclose an image with two <div> tags in a single line?

Can anyone help me with this layout issue I am facing? I have two <div>s wrapping an image in the same row, but for some reason, the right <div> keeps dropping below. I've attempted using float, display:inline-block, and tweaking the styl ...

htmlcss

Is it possible to dynamically override inline styles?

My HTML code is as follows: <div title="remove css"style="position:relative;">Remove my style</div> After the page loads, I need to completely remove the position style attribute. Due to limitations, I cannot override the CSS. Is there a way ...

javascriptjquerycssangularjs

stepper vue with previous and next buttons

I am trying to create previous and next buttons in Vue, but I am struggling a bit because I am new to learning Vue. I have some methods like this.activeIndex < this.activeIndex - 1 that I need to implement. Can someone help me with how to do this? cons ...

javascripthtmlvue.jsvue-componentstepper

Create a visually stunning CSS3 animation within a specified container, mimicking the style shown in the

I'm currently working on creating the animation depicted in the image below: https://i.stack.imgur.com/W69EQ.jpg My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent conta ...

htmlcss