How to Make <body> Take Up 100% of the Browser Height ?

programming
8

When there is not enough content to fill a page, especially when someone is viewing a webpage on a very large monitor, and you might have a footer you want to keep down at the bottom, I would use css flexbox on an outer wrapper:

  display: flex; 
  flex-direction: column;
  justify-content: space-between;
   min-height: 100vh;

Your main div that needs to keep it’s maximum height, stretched to fill, even with little content you can set:

 flex: 1; 
 display: flex;
 align-items: center;
 justify-content: center;

The last three properties will center it’s content in the main div.