Distinguishing between min-height and height in CSS
Suppose we set the height of the body of a page to be 100%. Then what happens is that the body's height takes up 100% of the viewable area. If the content is taller than 100% of the screen (i.e., a scrollbar is needed), then body tag will not extend to that height. So how do we get around this limitation? We set min-height instead of height. min-height sets the height of the page to be 100% of the viewable area when the content is smaller than the screen height. If the content is bigger then the screen height, then its actual height is used.