Footer In Bottom Always if empty content

How to make footer go to bottom when there isn't enough content on page

by Tarek Adra

HTML

<div class="body-content">
      <section class="content">
        <div class="container ">
          <div class="row    ">
             Here Page content
          </div>
        </div>
      </section>
      <section   class="footer">
        <div class="container">
          <div class="row ">
            <div class="col-md-12">
              Here Footer 
            </div>
          </div>
        </div>
      </section>
    </div>

CSS

html,
body {
    height: 100%;
}
.content {
	height: calc(100vh - 150px);
	height: -o-calc(100vh - 150px); /* opera */
	height: -webkit-calc(100vh - 150px); /* google, safari */
	height: -moz-calc(100vh - 150px); /* firefox */
}
.content {
	background-color:red;
	width: 100%;
	min-height: 500px;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

.footer{
  background-color:green;
  height:150px;
}