HTML5 Web Application Development By Example Beginner's guide

Time for action – expanding the application

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 ...