How to make the section and aside touch the footer?

Problem :

I got my footer to touch the bottom of the page all time by using the following css

 footer {
      width: 100%;
      bottom: 0;
      position: fixed;        
 }

Now I want to know how to make the section and aside touch the top of the footer at all times. I am using the following as style directives for the section and aside.

 section {
     float: left;
     background-color : red;
     width : 80%;

     }

aside{
      width : 20%;
      float : left;
      background-color : green;
    }

If I give height some particular pixel value it will not render correctly in some other screen size. What should I use in addition so the height is responsive and covers the area from header to footer all the time in all the various sizes of screen, wherever the page is going to be rendered? Any hint which will help me come out of this will be highly appreciated.

Solution :

These are based upon the Aside being 20% width and the Footer being 20% height. You can adjust accordingly. For the scrolling one, just remove the height attributes to allow it to be dynamic, but I would put a min-height:80%; on them just in case :). You don't need any of these silly wrappers ;).

Non-Scrolling

position:fixed; all elements and lay them out using top, left, right and bottom percentages to suit.

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
footer {
    width: 100%;
    bottom: 0;
    position: fixed;
    top:80%;
    background-color:orange;
}
section {
    position: fixed;
    top:0;
    left:20%;
    right:0;
    bottom:20%;
    background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
}
aside {
    position: fixed;
    top:0;
    left:0;
    right:80%;
    bottom:20%;
    background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
}

<aside></aside>
<section></section>
<footer></footer>

Scrolling

Add padding-bottom to the aside and section of the same value as the height of the footer.

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
footer {
    width: 100%;
    bottom: 0;
    position: fixed;
    top:80%;
    background-color:orange;
}
section {
    float: left;
    background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
    width : 80%;
    height:100%;
    padding-bottom:20%;
}
aside {
    width : 20%;
    float : left;
    height:100%;
    background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
    padding-bottom:20%;
}

<aside></aside>
<section></section>
<footer></footer>