DEV Community

Cover image for CSS gotcha: How to fill page with a div?

CSS gotcha: How to fill page with a div?

Lenmor Ld on January 12, 2020

TL;DR If you want to have a full-page container div, make sure you have these: /* override browser default */ html, body { margin: ...
Read full post
Collapse
 
angelsixuk profile image
Luke Malpass •

The one problem with vh is when you scroll on mobile and its address bar hides it changes its value to a larger one. If your page has a bunch of hero style sections on the page at 100vh this causes the page to jump the scroll position every time you scroll the page up and down and the address bar hides or shows

Collapse
 
mpuckett profile image
Michael Puckett •

Yeah unfortunately the vh unit is almost useless on iOS Safari. I believe the trick is to use height: 100% on html element and then pass that down to the body and any container with flex or grid.

developers.google.com/web/updates/...

Collapse
 
angelsixuk profile image
Luke Malpass •

Yes that only works on items at the top for heros. It doesn't allow you to use it mid-page.

It's a well konwn issue. I solved it just using JavaScript on load to set the height and add data-vh="100" where you can pass in a percentage of the view height then it sets it to pixels after load. I will enhance it to detect resizing from address bar hiding (perhaps if resize happens at same time as scroll) vs normal resizing and sort it that way.

Collapse
 
lennythedev profile image
Lenmor Ld •

Thanks for the heads up. I didn't get a chance to try this yet on iOS or Safari. I'll test it out and add it to the article

Collapse
 
lennythedev profile image
Lenmor Ld •

Thanks! I'll try to repro and add a note to the article.

Collapse
 
dd profile image
D •

What about this?

div {
  position: absolute;
  top: 0;
  left: 0; 
  right: 0;
  bottom: 0;
  background: #fb1;
}
Enter fullscreen mode Exit fullscreen mode

It's enough to fill entire page without effort.

Collapse
 
lennythedev profile image
Lenmor Ld •

Thanks for the note. Yes, this is definitely another way to do this. For this post though, I wanted to explore more of an alternative "relative" solution without using absolute positioning and dealing with z-index.

Collapse
 
souksyp profile image
Souk Syp. •

I was expecting to see

position:absolue (or fixed),
width:100%,
height:100%,
top: 0,
left: 0

on the targeted div... Good to know

Collapse
 
claudiucg profile image
claudiucg •

This is not working in 2021. Instead of full document height, html and body is 100% from the viewport, not the whole document.

Collapse
 
angelbearuk profile image
Kristy Whalen •

Yeap, that is unfortunately the state of web programming. Every year, every month, something breaks.

Collapse
 
promoteglobal profile image
Katherine •

So what is the solution now?

Collapse
 
tomerl101 profile image
Tomer •

This article should get more likes!

Collapse
 
ziizium profile image
Habdul Hazeez •

Interesting.

Collapse
 
bholmes999 profile image
bholmes999 •

Thank you so much! I'm learning and HTML and CSS, and I've been racking my head trying to figure out why my webpage wasn't fitting to the screen! I had width set to 100% on my html and body tags already; the box-sizing tip fixed everything with my layout!

Collapse
 
eob profile image
éamonn o'b-s Ω •

Thanks for this article!

Note, you have a small typo in the first code box. There's a stray colon.

body: {
Enter fullscreen mode Exit fullscreen mode

should be

body {
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lennythedev profile image
Lenmor Ld •

Thanks for the catch!