We can fill the browser window by using absolute positioning. Let's add the following to the styles for the <div id="app"> element:
#app
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
/* Code not shown… */
}First, it sets positioning for the element to absolute so that we can set the position of the element to whatever we want. Then we set all of the position properties to 0. This stretches the element so that it fills the entire space of the window. Lastly, we set the overflow property to auto. This will make a scrollbar appear and the gradient extend below the bottom of the window if the list of tasks goes beyond the height of the window.
We also need to reposition the footer so it sticks to the bottom of the window. We can do that the same way, by setting position to absolute and bottom to 0. Notice that we didn't set right to 0, so the footer doesn't span the entire width. Otherwise, it might interfere with the task list:
#app>footer
{
position: absolute;
bottom: 0;
/* Code not shown… */
}We expanded the main application element to take up the entire space of the browser window and moved the footer to the bottom. Let's see how our app now looks in the browser:
Think up and implement some more themes. Use some more of the CSS3 features we learned such as radial gradients, background images, or even some box shadows to produce some interesting-looking themes.