Set height to 100% of browser viewport when container is bigger than viewport?
I’m working on a website and I need to set a div’s height and width to cover the entire area of the browser viewport like many modern websites. However, I can’t simply set its height to 100% because its parent element is another div whose height must be set to bigger than the browser window. Is there another way of doing this?
Here’s a code sample set up similar to my website.
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Use viewport-percentage lengths. In this case,
You can also use
calc() to subtract the
10px top/bottom margins: