how do I make a element the size of the screen but not resize again?

Question

REFERENCE: http://www.templatewire.com/preview/landscaper/

I want to make a web page, and in that page, I want to have divs/sections each the size of the screen.

Now, I mean, the width and height of the monitor, and it won't resize again, and will stay the width and height of that monitor, regardless of the browser size, and regardless of how much content is inside it.

The link shows you what I mean, but I have a 1920x1080 browser window, you can see the top and bottom of the sections above and below it. I don't want the top and bottom of neighbouring sections to be seen if the monitor is very big, nor do I want the section to not be fully visible if the monitor's too small.

Example, say I had 5 sections like in the reference, and my browser window was 1920x1080, the overall height of that document would be 1920*5400.

(I want it to be the height of the screen minus the height on the nav bar.)

Answer 1

You can use Viewport units (the browser window size). 100vh is the height of the screen. If you got sections that bigger than the height of little screen you can use the min-height property and set it to 100vh.

Since you didn't place your code, this is generally example of use case:

section { min-height: 100vh;}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/length

Good luck!

Answer 2

It appears you're looking for viewport percentage lenghts .

To give any element current viewport's height, in CSS, one should use:

your-selector {
  height: 100vh;
  display: block;
} 

If the element is a <div> or any other element with a default value of block for display , it obviously doesn't need the second rule.

See it working:

 your-selector { height: 100vh; display: block; transition: background-color .3s linear; } /* let's add a hover, for testing */ your-selector:hover { background-color: red; } body { margin: 0; min-height: 200vh; } 

 <your-selector>Test</your-selector> 

Note: you can also apply viewport percentage lengths to other properties, such as min-height , max-height , etc...

Note: although default viewport is browser window, that's can change. For example, 3d transforms turn any regular DOM element into a viewport for their children, affecting behavior of viewport percentage lengths, as well as behavior of position:fixed in any of their children.