100% or 100VH not full screen for larger resolutions

Hi All,

I’m hoping someone can help. I read a few posts on a similar topic but couldn’t find a solution that works.

A site I created is made of fixed divs which are set to 100VH (I also tried 100% with 100% on body). Instead of showing full screen, there are empty spaces on top or bottom and would appear to be 80% or similar of vertical height.



Is there a way to fix this? The site is currently live with the issues.

I am using http://quirktools.com/screenfly/ to check on large monitors.




I don’t think I am seeing what you are referring to. At what screen resolution is this starting to happen?


Could you show a screenshot of the issue? I made the page fullscreen on a 27" 5k iMac and without knowing how you WANT the design to appear, I’m seeing nothing like what you describe.

My suspicion is that there is an error popping up in the tool you’re using to simulate larger screens.

It’s happening on everthing above 15" Notebook (1366 x 768). Thanks

Alright. Get rid of your max height value (currently 800px) on your “centre hero” element and you should be good to go. Full-screen screenshot is at a resolution of 3200x1600.

1 Like

Thanks a million. That fixed it. :slight_smile: I appreciate it.

1 Like