Make Auto Height 100% With CSS (Fullscreen) TWD

Making the height 100% according to the monitor’s height with css is sometimes an obstacle for some web designers, but actually the trick is very easy, they just don’t understand the trick. Or it could be that it doesn’t care about all the tags in the html.

Auto Height 100% Fullscreen CSS
Auto Height 100% Fullscreen CSS

There is a question on the forum asking him to make a very good design, it fits the monitor height on the screen 1366px x 768px, it looks very good, but because the website will be opened on a screen with a resolution of 3840px x 2160px so the height is not appropriate and the website so messy, leaving space at the bottom, even though the width is appropriate because it uses fluid or uses percent (100%).

So why the height is not appropriate?
Since it’s made at a resolution of 1366px x 768px it won’t fit on a bigger screen or it won’t work well on a smaller screen either.

The habit of web designers is not to think too much about the height of the html and body tags, even though therein lies the mistake. They only focus on the height of the tags (elements) that are in the body, such as headers and content for example, so take a look at the following structure.

Auto Height

Header

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Perferendis, incidunt qui dolorem excepturi natus modi debitis voluptas nesciunt magnam adipisci possimus inventore doloribus amet quia voluptatum quas exercitationem obcaecati neque.

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Placeat, laboriosam, officiis consectetur deserunt ipsam blanditiis laborum tempore ut esse exercitationem molestiae reprehenderit. Inventore, cupiditate similique vero culpa est neque fuga.

If you pay attention there if we want to create a fullscreen website using percent (%), we have to remember that all the tags have a height: auto property by default.
So if you want to make .header and .main fullscreen then we have to make the html and body to 100% first, then we set the tags inside the body as desired.

WRONG CSS: Usually many people use css as below so the results are not as expected, even though the height in .header and .main becomes 10% and 90%, it doesn’t work because html and body still have auto values ​​by default, not 100%.