O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required