Make Auto Height 100% With CSS (Fullscreen)
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 was a question on the forum asking that he made 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 suitable 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?
Because it is made at a resolution of 1366px x 768px it won’t fit on a bigger screen or it won’t be as good if it’s opened on a smaller screen.
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 we pay attention there, if we want to create a fullscreen website using percent (%), we have to remember that all tags have a height: auto property by default.
So if you want to make .header, and .main fullscreen then we have to make 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 is 10% and 90%, it doesn’t work because html and body still have auto values by default, not 100%.
*{
padding: 0;margins: 0;
}
.headers{
height: 10%;
background: red;
}
.main{
height: 90%;
background:yellow;
}
.main-content{
padding: 20px;
}
CORRECT CSS: So the css that should be used is something like this, where the html and body are given height:100%;
*{
padding: 0;margins: 0;
}
html, body{
height: 100%;
}
.headers{
height: 10%;
background: red;
}
.main{
height: 90%;
background:yellow;
}
.main-content{
padding: 20px;
}
There you can see that the html and body are made with a height of 100% (height: 100%)
then we can freely determine the height for the elements in the body tag. It can be seen there for example .header is made with a height of 10% and .main with a height of 90%.
Then the results that we will be able to see in the following demo, can be compared the results.
DEMO Wrong | True Demo
What if the content is too long & has a footer
Demo 1, Demo 2, Demo3
Demo 1, Demo 2, Demo3
If the content in CLASS .main is too long and we want it to have a footer then we first adjust the height of the .header, .main, and .footer.
Example:
.headers: 10%;
.main: 85%
.footer: 5%
TOTAL = 100%
and for content that is too long, we need to provide overflow-y: scroll on the .main class so that the contents of the .main CLASS will display a vertical scroll and the content does not exceed / pass the footer.
HTML Example
Auto Height
header
Lorem ipsum dolor sit amet, elite adipisicing consectetur. Perferendis, incidunt qui dolorem excepturi … … … …
Footer
CSS
*{
padding: 0;margins: 0;
}
html, body{
height: 100%;
}
.headers{
height: 10%;
background: red;
}
.main{
height: 85%;
background:yellow;
overflow-y: scroll;
}
.main-content{
padding: 20px;
}
.footer{
height: 5%;
background: orange;
}
Various ways
There are actually many other ways, it could be with javascript, maybe also with css display tables, but this is just one example.