How can I define margins for a specific div in print media using CSS?

Hello everyone, I'm currently experiencing an issue with my print media CSS. On the HTML page, there are two main divs - one for the body and one for the footer.

<div class="main-template-body" id="main-template-body">
    //content
</div>
<div class="main-template-footer">
    //footer
</div>

When printing the webpage, I want the footer to be fixed at the bottom of every page. I have successfully achieved this using the following CSS:

.main-template-footer {
       display:block; 
       position:fixed; 
       bottom:0; 
       width:100%; 
       min-height:50px; 
       height:auto; 
}

For the body part, I tried using margin-bottom in order to set a margin between the body and the bottom border of the printed page to prevent overlap with the footer, but it didn't work as expected.

.main-template-body {
    width:100%; 
    height:auto; 
   display:block; 
   position:relative;
    //margin-bottom: 20px; tried
    //margin-bottom : 2cm; also tried this
}

My question is, how can I set a margin between the 'main-template-body' div and the bottom border of the print page to avoid overlapping with the footer?

The current CSS is applying the margin to both the body and the footer:

@page {
  margin-bottom: 4cm;//<- How to set this margin to specific div only?
}

Thank you all in advance.

Edit: Below are images of two pages where on the first page there is an overlap between the footer and content, with the content continuing onto the second page. I need to set a margin to the content to prevent this overlap from happening.

https://i.sstatic.net/bkrtg.jpg

https://i.sstatic.net/hATlE.jpg

htmlcssprinting

Answer №1

Perhaps this piece of code will be beneficial for you.

html, body{
        height: 100%;
        margin: 0;
    }
    .main{
        min-height: 100%;
        position: relative;
    }
    .main-template-footer {
        height: 50px;
        bottom: 0;
        position: absolute;
        width: 100%;
    }
    .main-template-body {
        padding-bottom: 50px;
    }
<div class="main">
    <div class="main-template-body" id="main-template-body">
        //content
    </div>
    <div class="main-template-footer">
        //footer
    </div>
</div>

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

Using jQuery to dynamically add or remove CSS classes to an element based on the selected radio button

Currently, I am attempting to utilize localstorage to save a class based on the selected radio button. Essentially, when the second radio button is clicked with the data-color attribute "color2", the goal is to apply that data as a class to the .box elemen ...

jqueryhtmllocal-storage

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

javascripthtmlangularjs

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

https://i.stack.imgur.com/kEAKC.png https://i.stack.imgur.com/03tHg.png After examining the two images above, it appears that the CSS is not functioning properly when I try to append the same HTML code using JavaScript. Below is the snippet of my HTML co ...

javascriptjqueryhtmlcssstyles

The d3.select function is failing to update the chart on the website

I am facing a challenge in updating data in a d3 chart with the click on an HTML object #id. After successfully coding it in jsfiddle, I encountered issues when implementing it on a web page. The scenario involves a simple leaflet map where the chart is d ...

javascriptjqueryhtmld3.js

Creating an HTML table layout: A step-by-step guide

I am in need of assistance with designing an HTML layout. My goal is to display 3 columns for each table row as described below: Column #1 will contain text only. Column #2 will have an inner table, which may consist of 1 or 2 rows depending on the cont ...

htmlcss

Using JavaScript, conceal a specific Div by examining the content within another Div

I am attempting to implement some logic using JavaScript. The goal is to hide the "cart-button" div if the innerHTML value of a div with the class "b-format" is set to Audio, otherwise hide the "more-button" div. However, for some reason this functionality ...

javascripthtml

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium

javascript - Retrieving a JSON string

I am currently working on a stock website where I need to retrieve JSON information from either Google's API or Yahoo's API. To test this functionality, I have used a replacement function to log the data onto a text box for testing purposes. Howe ...

javascriptjqueryhtmljson

Show a checkbox element with a square in the center instead of a tick mark

Is there a way to create a custom checkbox in HTML with a black box in the center, similar to the third checkbox shown in the image below? I've noticed this design in many interfaces, but I haven't been able to find a satisfactory example online ...

javascriptjqueryhtmlcss

update the markers on a leafletjs map

I am aiming to create a dynamic map with markers that update every 10 minutes. The marker positions are stored in a spreadsheet document that is regularly updated. After successfully retrieving the data from the spreadsheet and positioning the markers in ...

javascripthtmlmappingspreadsheet

Executing a function upon the loading of a template in AngularJS

I have been searching through various responses here, but I haven't come across one that addresses my specific problem. Apologies if this has already been answered. I am a beginner in angular js and have recently begun working on angular routing. I am ...

jqueryhtmlangularjsngroute

Google Maps Marker disappeared upon relocation to the current application

After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev ...

cssgoogle-mapscanvasgoogle-maps-api-3marker

Web Security Vulnerability: Cross Site Scripting Detected

In our code, we are aiming to prevent XSS (Cross Site Scripting) attacks. However, the solution may involve a combination of JS (JavaScript) and HTML escaping, which could prove to be quite challenging. Below is a snippet that closely resembles our code: ...

javascripthtmlsecurityscriptingxss

Is there a way to adjust paragraph sizes in CSS flexbox so they scale with the font size?

After spending hours trying to figure this out on my own, I finally caved and registered on StackOverflow. Despite Google providing plenty of related questions and examples, I still can't find a solution to my specific problem. The issue at hand is c ...

htmlcssflexbox

How can I utilize ajax to transmit data to a PHP file and then display the contents of this file within a div utilizing the

This is the script I am using for ajax: var cid = $(this).data('cid'); var sendData = { canidtoset: cid }; $.ajax({ url: '/functions/cv_showinformation.php', type: 'post', data: sendData, dataType: 'json ...

phpjqueryhtmlajax

Discovering the presence of line breaks

I have searched extensively on Google, but I am struggling to find a definitive answer. My goal is to create an email simulation where users can input text into a textarea and save it to the database. They should then be able to return to the page later a ...

javascriptjqueryhtml

What is the method to run a script within a particular div?

Here is an example of the DOM structure: <div> <button>Click me</button> <img src=#> </div> <div> <button>Click me</button> <img src=#> </div> <div> <button>Clic ...

javascriptjqueryhtmldom

The sticky navigation and scroll to top features both function perfectly on their own, but when used simultaneously, they do not work

I'm facing an issue with two scripts on my website - when they are separate, they work perfectly fine but together, they don't seem to function properly. What could I be missing here? Script 1: window.onscroll = function() {myFunction()}; var n ...

javascriptcssscrolltop

Guide on incorporating a dropdown menu within a Jssor slider

I am facing an issue with trying to include a dropdown menu inside the Jssor slider. The menu does not drop down when placed inside it. Here is the code snippet: <head> <script src="jquery.js"></script> <script src="jssor.slider.min. ...

javascriptjqueryhtmlcssjssor

What is the process for setting a linear gradient border color on a table row's border?

Currently, I am attempting to apply a linear gradient border color to the table row. Below are the codes for the table: td:first-child { border-left: 1px solid black; border-bottom-left-radius: 50px; border-top-left-radius: 50px; } td:last-child { bor ...

csshtml-table