Almost there, just a few tweaks needed! Make sure to fix the typos and add the magical html, body: 100% for height reference.
- Change
.body to body
- Add two
;s in the .slider styles
- Adjust the height of
.slider to 60%
- Update
color: lightBlue to background: lightBlue in the .footer styles
Here is the corrected code:
html, body {
height: 100%;
}
body {
margin: 0;
}
.navigation {
background-color: lightyellow;
width:100%;
height:20%;
position:fixed;
}
.slider {
position: absolute;
top:20%;
height:20%;
width:100%;
background-color: lightgreen;
}
.footer {
position: relative;
top: 80%;
background-color: lightblue;
height: 20%;
width: 100%;
}
Check out the demo here
Note: If you want scrolling, consider increasing the footer's height beyond 20%.