Share via


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.