Fit page to any screen resolution - html

Question

I'm creating a print template for my website everything it's OK but I have a problem, my screen resolution is 1600x900 so I design the page for that resolution, I'm talking about the height, because my page is created with Bootstrap so it's responsive, sound a little weird but let me explain it, the page in my screen looks like this:
All this if for "print preview (ctrl + p)"
Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text
Some text
Footer
Some text
Some text
Some text
Some text
But when I tried with others resolutions looks like this:
Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text
Page 2
Some text
Footer
Some text
Some text
Some text
Some text
My question here is if exists a way to fit the page to the same height for any resolution, in other words show the page exactly of how it looks in my screen.
This is what I tried:
p {
font-size: 12px;
line-height: 1;
}
#page {
size: A4 landscape;
margin-left: 18mm;
margin-top: 0.2mm;
}
With that sometimes works, I don't expect that you code for me, but I expect some tips to solve this, thanks in advance and my apologize if this can't be understood

Answer 1

You’re approaching this problem wrong. There are an infinite variety of screen sizes out in the world. It's a mistake to design with a single resolution in mind. At best you can target a range of devices with similar dimensions, but then you're excluding a huge number of different devices.
Web pages do not need to look the same on every device. As soon as you internalize this, you’ll begin to become a better web designer.
All that said, you can use viewport units to ensure that that an element remains sized proportionally to to any screen size, but it's not going to be a one-size-fit-all solution, and I don't believe this works when you print.
For example:
.container{
height: 100vh
width: 100vw;
}
You can also use media queries to tell how the browser should print your web page, which are a good way to ensure a page prints the way you want it to. For example, instead of #media screen and (min-width: 30em){…} you can write #media print and (min-width: 30em){}.
Keep in mind your print stylesheets may already be using styles from other mobile or tablet media queries, so it can sometimes be a bit tricky, and you may need to override them. A printed document typically has a pretty narrow “viewport”.