Setting the initial page size can be confusing at times. Here, we want it to equal the the viewport width and height but also be able to scroll vertically (not horizontally) when the content becomes longer.
First, lets set the page to the full viewport height. We can do this by
setting min-height: 100% on the html element; it
inherits from the viewport so the page will have a height equal to
100vh or the full height of the browser's visible display
area. We'll also add the margins back to the header and paragraphs, and
give the paragraphs some padding to make things easier to read.
Note that if you try this directly on the body element the
page will not expand to fill the window height. Percentage values are
relative to the parent container, if no specific height is set on the
html
element the body will be sized at 100% of zero, and so just default back
to its content's height.
The height property is not inherited so even though the
html element is implicitly equal to the viewport to the
elements descendents the width and height values are zero unless they have
been explicitly set. This is true for any element, if no explicit width
and height are set on the parent element taking a percentage value will be
the same as setting width and height to zero regardless of how large the
parent element actually is.
In practice, it is much simpler, and more common, to set
min-height: 100vh in the body element and, due
to the peculiar relationship between the html and
body elements, the html height will grow along
with the body's height. What the earlier settings demonstrate is why it is
better to prefer 100vh over 100% when setting
the page height. This is not true for setting the page width.
We should always prefer to leave the width unset or use the default
auto if we need to explicitly set it. Setting the width to
100% or 100vw will trigger the horizontal scroll
bar the minute the vertical scrollbar is triggered, something we do not
want, especially on mobile devices. Browsers calculate the full width to
be the visible width less the width of the vertical scrollbar. As
that means it can no longer have 100% or
100vw of the screen, it flags an overflow condition and the
horizontal scrollbar is turned on. The auto default takes the
vertical scrollbar into account and does not trigger an overflow
condition.
If you want to have an empty wrapper for later use, setting a
min-height with a percentage will not work if the body only
has a min-height itself. You need to set an explicit height
or some padding i.e. padding-top: 25% this will use 25% of
the parent's (in this case, the body's) width even though no
explicit width has been set on the body (see the empty
div below).