How to stretch an element to the end of the screen?

Question

How to stretch an element to the bottom of the page taking into account the position it is in?

ex:

 <div class="caixa1">CAIXA 1</div>
 <div class="caixa2">CAIXA 2</div>

.caixa1{background-color: red;}
.caixa2{background-color: blue;}

How to make the box extend to the end of the screen?

Note that I am not looking for an example footer!

Preferably without use of javascript

Answer 1

In any of the solutions you are having overflow of the div on the page, ideally you calculate the height of it, this way:

height: calc (100% - a); 

Where a is the distance of the object to the top of the page, I believe that only with js we can take this value dynamically, this way it is better to insert manually.

Answer 2

Long live,

You can see the example here: http://codepen.io/anon/pen/mVNZqr

You just have to use:

  height: 100%;
  position: absolute;

Hug and good luck ;)