How to keep footer at bottom of screen

What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?

What you’re looking for is the CSS Sticky Footer.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 180px;
  /* must be same height as the footer */
}

#footer {
  position: relative;
  margin-top: -180px;
  /* negative value of footer height */
  height: 180px;
  clear: both;
  background-color: red;
}


/* Opera Fix thanks to Maleika (Kohoutec) */

body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /* thank you Erik J - negate effect of float*/
}

<div id="wrap">
  <div id="main"></div>
</div>

<div id="footer"></div>

You could use position:fixed; to bottom.

eg:

#footer{
 position:fixed;
 bottom:0;
 left:0;
}

HTML

<div id="footer"></div>

CSS

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   
   background:blue;//optional
}

set its position:fixed and bottom:0 so that it will always reside at bottom of your browser windows

Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.

css:

<style>
  body {
    margin: 0 0 20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 20px;
    background: #f0f0f0;
    width: 100%;
  }
</style>

Here is the html main content.

<div class="footer"> Here is the footer. </div>

use this style

min-height:250px;
height:auto;