When printing a PDF, a div that is set to 100vh only takes up

After setting the div to be 100vh, I realized that when printing it only takes up half of the page. Adding media print did not make a difference, and even trying to set the height to 100% instead didn't work for PDFs.

html,
body {
  height: 100%;
  margin: 0;
  position: relative;
}

.page100vh {
  background-color: red;
  height: 1000vh;
  width: 100vw;
}

@media print {
  .page100vh {
    height: 100vh;
  }
}
<div class="page100vh"></div>

https://i.sstatic.net/QAZCV.png

Answer №1

When establishing objects in a PDF, it is important to maintain consistency between the units used for X and Y (since PDFs are technically unitless). It is recommended to use pixels (px) for HTML, although inches or millimeters can be utilized for defining the media ratio, such as 210 x 297 for A4 size.

To fully cover a page, one approach could be to specify the width as 100%, therefore requiring the height to be 141.421% of the same width units. For double pages, the width should be set at 282.842%. The vh unit does not necessarily correspond with vw for PDFs; the MediaBox viewport scale is more relevant for HTML screens.

@media print {
@page { size: A4;
  margin: 0;
}
}
html,
body {

  margin: 0;
  position: relative;
}

.pageDiv {
  background-color: red;
  height: 141.421vw;
  width: 100vw;
}
<div class="pageDiv">Hello World!</div>

https://i.sstatic.net/LoNBD.png https://i.sstatic.net/ffFit.png

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

What is the functionality of the disabled attribute on an option tag within a dropdown select menu?

I am working with a code snippet that involves understanding how the attribute:disabled functions on an <option> within a <select> element! Let's say I have a dropdown for ratings and I select the 5-star option (★★★★★). Upon sel ...

Tips for resolving the issue of "Unable to assign property '_DT_CellIndex' to undefined in Jquery Datatable"

<?php if(mysqli_num_rows($result)>0) {?> <table class="table table-striped" id="example" align="center"> <tr> <thead> <th style=&quo ...

Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...

Numerous HTML forms for submission

How can I distinguish between different forms and submit buttons that are directed to a specific php function? On my current page, I have two forms but each submit button triggers different actions. I attempted to use ISSET to manage the submit actions, ...

What is the best way to change the size of an SVG image

I have exhausted all the methods I could find on stackoverflow and Google, but my SVG is refusing to resize. Would someone kindly shed some light on why this might be happening? <div> <svg viewBox="32 32 32 32" height="100" width="100"> ...

No action is triggered when the button is hovered over

I've implemented these hover effects but for some reason, they are not working as expected. I'm struggling to understand why this is happening. The primary button at the bottom is also experiencing the same issue. body { background-color: #aa ...

Having trouble incorporating a JavaScript snippet from Google Trends into an HTML webpage

Hey everyone, I've been trying to incorporate a JavaScript script to display Google Trends on an HTML page. I copied the embed code directly from the first image at and modified it as follows. Unfortunately, it's not working as expected. <ht ...

Deactivate the focus state when hovering over different items in the navigation bar

Currently facing an issue with my Navbar items having underline animation on hover. Once clicked, the animation persists. However, when hovering over a neighboring navbar item, the underlines appear next to each other, creating the illusion of one long lin ...

The navigation bar toggle feature seems to be malfunctioning in Bootstrap 5

I've encountered a problem with the navbar while using Bootstrap 5.0.2 dist. The toggler on the navbar expands and collapses, but it doesn't roll back after clicking the bar icon. I have implemented the fixed-top navbar from the Bootstrap 5 examp ...

Send the selected dropdown value to two separate PHP pages without using JavaScript

I am specifically looking for PHP programming, not JavaScript. My requirement is to have a dropdown menu containing 15 weeks. When a user selects a week from the dropdown, they should be redirected to a page that displays a message saying: Welcome! You h ...

Show a preview of an image in an HTML document

How can I display an image after uploading it? I attempted to use the following code, but it didn't work: onFileSuccess: function(file, response) { var json = new Hash(JSON.decode(response, true) || {}); if (json.get('status& ...

Blackberry Browser 4.2 experiencing spacing troubles

Seeking advice for developing a web application specifically for the Blackberry Browser 4.2. Looking to add vertical spacing between a series of links, but struggling due to lack of support for padding and margin in this version. Have tried using height an ...

Using AngularJS to dynamically bind HTML content based on a variable’s value

I am trying to dynamically display an image of a man or a woman on a scene, depending on the gender of the person logged into my website. The ng-bind-html directive is working fine when I define "imageToLoad" statically. However, it fails when I try to gen ...

Styling limitations encountered when using lang="scss" with scoped css

My current project involves using Quasar and I am attempting to style the first column of q-table: <style lang="scss" scoped> td:first-child { background-color: #747480 !important; } </style> Unfortunately, this code does not seem to have a ...

If the URL hash matches the ID of a specific div, then take action on the div's child element

Imagine I have the following HTML structure: <div class=".blog-item-holder"> <div id="AAAA"><div class="inner">AAAA</div></div> <div id="BBBB"><div class="inner">BBBB</div></div> <div id="CCCC">& ...

Styling pagination using CSS and jQuery

I am looking to display 3 sections in a simple, paginated way that mimics tabs. I am trying to implement the logic where when a pagination item is clicked and has the 'active' class, it should show the corresponding block. However, I am strugglin ...

Encountering issues with CSS selectors when using Selenium WebDriver

I am encountering an error with the following code: elem = new Array() elem = driver.findElements(By.CssSelector('input')); What could be causing the issue in the code above? If I have an HTML form like this: <form role="form" method="post ...

Here is a guide on how to specify function selection values for a total order. By default, the selection will have predetermined values, and upon clicking the sum button,

<tr id=""> <th> <select id="selection" onchange="myFunction()"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dres ...

When the input field is not selected, switch it to display as plain text

I have a table where the cells become editable when clicked on by a user. I want the editable area to revert back to plain text with the updated value once the user deselects the text field. Is it possible to utilize AJAX to update a database with the new ...

Function in jQuery to reference two different divs

I'm currently facing an issue with a code snippet that I have. The requirement is for the user to be able to hover over "Div 1" and/or "Div2" and trigger a red border around both elements simultaneously. Due to the complexity of my WordPress theme, th ...