How to Set Div Height to 100% of Chosen Print Paper

How to set div height to 100% of chosen print paper?

width: 100%;
height:100%;
position:absolute;
top:0px;
bottom:0px;
margin: auto;
margin-top: 0px !important;
border: 1px solid;

also, if position absolute won't work you can do the same with position:fixed; this will work but might do some more damage to your layout, depending on how everything is arranged :)

I'll edit this to make it more obvious, so... if you are using position fixed and you have multiple pages they will just go one on top of the other so that wouldn't be right... but in order to get the right result with position absolute you have to keep in mind that the css style here will take 100% of the height, but it's the height of it's parent... so if the parent is the body just add html, body{ height:100% };

CSS print - stretch table for the entire page (height = 100%)

You can use vh units to adjust the table's height.

@media print {
  .my-table {
    height: 90vh; 
  }
}

90vh equates to 90% of the height of the page, so adjust this as necessary.

Added code snippet:

document.querySelector("#print").addEventListener("click", function() {  //var html = "<div>Test assignment</div>";  //$('.test').html(html);  window.print();});

@media print {  body * {    visibility: hidden;  }   #print-wrapper * {    visibility: visible;  }  .my-table {    width: 100%;    height: 90vh;    border: solid;    table-layout: fixed;  }  }

<input type="button" value="print" id="print"><div id="print-wrapper">  <div class="print-heading">My table  </div>  <div>    <div class="print-week-heading">Some heading</div>    <table class="my-table">      <tr>        <td>          A        </td>        <td>          B        </td>      </tr>      <tr>        <td>          C        </td>        <td>          D        </td>      </tr>
    </table>  </div></div>

Change CSS if A5 size paper is chosen when printing?

you could try the following media queries although I'm not sure how wide spread the support is:

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
  @page {
     margin: 3cm;
  }
 }

/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
  @page {
  margin: 1in;
  }
} 

function paperSelect(){

var elems = document.body.getElementsByTagName("*");

 if (event.target.id == 'a3'){
    for(let i = 0; i < elems.length; i++){
       elems[i].classList.add("mystyle");    
    }
 }else{
    for(let i = 0; i < elems.length; i++){
       elems[i].classList.remove("mystyle");    
    } 
 }

}

li{
   display:block;
}

li.mystyle{
   display:inline;
}

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
A4<input id='a4'  type='radio' name='print' checked onchange='paperSelect()'>or A3
<input id='a3' type='radio' name='print' onchange='paperSelect()'>

How to make HTML pages print at a consistent size from Chrome?

I found a solution. The key is to ensure that in each document, the "logical page" that Chrome splits elements into for printing is the same size. E.g. if one document has lots of 200x200px squares and Chrome decides to group them in a rectangle 5x4 to print landscape, then you need to make sure that Chrome will print every other consistent document split into elements of size 1000x800px.

For documents that are simply a number of spans or inline-block divs in sequence, it suffices to have a div set to exactly your chosen width (1100px), and ensure that that div occupies the full page width in print preview. Then just make sure your CSS contains something like:

@media print {  
  @page {
    size: 297mm 210mm; /* landscape */
    /* you can also specify margins here: */
    margin: 25mm;
    margin-right: 45mm; /* for compatibility with both A4 and Letter */
  }
}

If this isn't sufficient, then putting everything inside one or more divs with fixed size (width: 1100px; height: 800px; overflow: hidden;) does the job, as a way to force Chrome to split into the pages you want (and therefore keep elements the same size when printed).

100% height of parent. All parent heights are dynamic

Percentage heights are calculated from the parent element, pixel heights aren't. That means you would need to set height on each level ONLY if all of the heights need to be in percentage.

You can set min-height on 2a2 with a pixel value, so it won't get any smaller than that, but it will able to expand beyond that value. And then you set height: 100% on 2a2a. This will work because the parent element(2a2) has an absolute value in px.

Edit:
To make the 3 divs fill the rest of the container regardless of the content, you have to use the padding-bottom, margin-bottom trick. Here's the codepen.

Print div id=printarea/div only?

Here is a general solution, using CSS only, which I have verified to work.

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Alternative approaches aren't so good. Using display is tricky because if any element has display:none then none of its descendants will display either. To use it, you have to change the structure of your page.

Using visibility works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move section-to-print to the top left so it prints properly.

Landscape printing from HTML

In your CSS you can set the @page property as shown below.

@media print{@page {size: landscape}}

The @page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is @Page { size:landscape} obsolete?:

CSS 2.1 no longer specifies the size attribute. The current working
draft for CSS3 Paged Media module does specify it (but this is not
standard or accepted).

As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.

The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.

It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).

This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.

Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.

<link media="print" rel="Alternate" href="print.pdf">

In conclusion in some browsers it is relativity easy using the @page size option however in many browsers there is no sure way and it would depend on your content and environment.
This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.

---

Related Topics