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 do I make Box2 stretch to the end of the screen?
Note that I'm not looking for an example footer!
Preferably without javascript
Live,
You can see the example here: link
Just use:
height: 100%;
position: absolute;
Hugs and good luck;)
In any of the solutions you are having overflow of div on the page, ideally you calculate the height of it, this way:
height: calc (100% - a);
Where a is the distance from the object to the top of the page, I believe that only with js we can get this value dynamically, so it is better to enter manually.