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


Tags: css,printing

Problem :

How can i set the height to 100% of chosen print paper?

CSS

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

When i print in Google Chrome, my printed div will only be as high as the content in the div.
Can i solve this?
Is it possible to make a div as high as chosen paper size?



Solution :

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 Howto..

    how to set CSS border-left outside of box

    How to increase checkboxes size with css which work in Google Chrome?

    How to make the height of content div proportional?

    how to choose what transform is applied first in css

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to create a curve tail for speech bubble with CSS?

    How to add left border with image(s) dynamically

    How to use images in css with Webpack

    How do i create a responsive page with fixed positioned header and side nav using only html css?

    How to stack divs from top to bottom in CSS

    How do I remove the underline from an image wrapped in an anchor?

    How to do CSS for a grid of images

    How to add styles based on whether top element is empty

    How to place Facebook send dialog box above other content?

    How to arrange images at middle of vertical using css?

    How do prevent a div from resizing? [closed]

    how to add string to the class javascript(jquery)

    How to properly link CSS files with PHP footer and header

    How to avoid the overlapping of the button?

    How to bring DIV2 to top WRT DIV1?

    How to make a very simple coloured 1-line text area?

    How to accomplish this layout in HTML/CSS?

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    How do I achieve this particular hover effect?

    How to show CSS transitions only on hover?

    How to write CSS for parent DIV needing height dictated by child DIVs that are also anchored bottom?

    How to create flexible div items that break after the line?

    how to let CMS make use of my css files instead of its own css?

    How to wrap text without whitespace? [duplicate]

    Best practice: how to name css default state? [closed]