CODEWITHSUNDEEP
htmlcsscss-position
Flynn1179
Flynn1179

Reputation: 12075

How to make a div fill the current page

I'm trying to create a document using HTML which when it's printed, adds a 'cover page' with a border. I have a div that's only visible with '@media print', but I can't figure out how to get that div to fill the page. Setting a height of 100% with position: absolute fills the entire document, not just that one page.

Is there a way of restricting the size of the div to just the current page? When I tried position: fixed, it did put it in the right place, but on every page. In essence, I need to find a way to set height to the viewport height, but maintain position: absolute.

For this purpose, I'm restricted to a solution compatible with IE8 only.

Upvotes: 1

Views: 1638

Answers (2)

Luizgrs
Luizgrs

Reputation: 4873

If you do a div#cover like this:

#cover {
   background-color: red; 
   position: absolute; 
   border: 3px solid blue;
   box-sizing: border-box;
   top: 0; 
   left: 0; 
   bottom: 0; 
   right: 0; 
   display: none;
}  

@media print
{
    #cover { display: block; }
}

Your first page will be red with a blue border (or whatever it contains in the div)

The top, left, right, bottom make it fit to the viewport.

The box-sizing make it incorporate the border size at the div content width/height.

Without your HTML it's not possible to help further than this.

Upvotes: 0

chdltest
chdltest

Reputation: 873

Give your html and body a height of 100% then the cover a height of 100% to get a cover height based on the viewport. Give the cover a position of absolute as well and position it.

body, html { height: 100%;
}

#cover { position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}

Upvotes: 1

Related Questions