Why set height: 100% for html and body?
If you want the overall height of a web page to match the height of the viewport, you may want to set height: 100%; on the html andbody elements. This is often used to satisfy design requirements to match the size of the background or a particular section of the page to the viewport.
Side Effects of height: 100%
However, setting height: 100%; on html andbody can cause problems with automatic scrolling to the top of the page when overflow: hidden; is specified. This is unexpected behavior for many users and can reduce page usability.
Solution.
To avoid this problem, we recommend using min-height: 100vh; instead of height: 100%;. This will make the minimum height of the page the height of the viewport, avoiding the above problem while still meeting similar design requirements.
Conclusion
Setting height: 100%; on html andbody can cause problems in certain situations and should be used with caution. It is important to apply the appropriate style according to the design and requirements of the page.