calc() function allows you to perform calculations when specifying CSS property value. It’s particulary interesting if you need to do some evaluations with different units

width: calc(100% - 80px);
Note - an + signs should be surrounded by whitespace!

Nice thing it’s supported by all major browsers

Now footer might be implemented in easy way, instead of looking for hacks with negative margins

body {
background: red;
padding: 0;
margin: 0;
height: 100vh;

.container {
background-color: cornflowerblue;
min-height: calc(100% - 80px);

.footer {
background-color: yellow;
height: 80px;

And HTML part is simple as this:

<div class="container"></div>
<div class="footer"></div>


You may notice vh unit at rules for body. That’s awasome units! You can find some info about vh and vw in the article