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