height: 100%;
means it will take the full height
of the containing element. You would need to make sure that
every ancestor of the element - including the
html
and
body
elements - was tall enough for your requirements.
If you just want the element to take 100% of the viewport height, then use
height: 100vh;
instead.
Viewport units: vw, vh, vmin, vmax - Web Design Weekly[
^]