Why div height 100 not working?

2022-08-17 138 words One minute

In order for a percentage value to work for height, the parent’s height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you’ve given all of your elements height, except for the <html>, so what you should do is add this:

1
2
3
html {  
    height: 100%;  
}

And your code should work fine.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
* { padding: 0; margin: 0; }  
html, body, #fullheight {  
    min-height: 100% !important;  
    height: 100%;  
}  
#fullheight {  
    width: 250px;  
    background: blue;  
}<div id=fullheight>  
  Lorem Ipsum          
</div>

JsFiddle example. By: Madara’s Ghost From html — Why doesn’t height: 100% work to expand divs to the screen height? — Stack Overflow

Contact me: Hung, Chien-Hsiang (chienhsiang-hung.github.io)