I am having issues with a bug in a project I am working on.
The mobile menu which I want to take the full height of the viewport when it is less than 768px doesn't have a height even though I set it to 100%.
It will only be in view when toggled using the hamburger icon.
To troubleshoot your
height: 100% problem, have a look at this post:
As an alternative, use
From the spec:
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.
- vw unit - Equal to 1% of the width of the initial containing block.
- vh unit - Equal to 1% of the height of the initial containing block.
- vmin unit - Equal to the smaller of
- vmax unit - Equal to the larger of
Browser Compatibility (viewport units have pretty much full support among major browsers, except IE 9, 10 and 11, and Edge, don't support