- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 322字
- 2021-08-13 16:50:25
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 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… */ }
What just happened?
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:

Have a go hero
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.
Pop quiz
Q1. How many color stops can a gradient have?
- One
- Two
- Three
- Any number
Q2. What does a transition do?
- Transitions CSS properties from one value to another
- Transitions an element from one type into another
- Transitions from one class to another
- Transitions from one view to another
- Learning C# by Developing Games with Unity 2020
- 國際大學(xué)生程序設(shè)計(jì)競賽中山大學(xué)內(nèi)部選拔真題解(二)
- 數(shù)據(jù)庫原理及應(yīng)用(Access版)第3版
- Python for Secret Agents:Volume II
- Mastering Selenium WebDriver
- 深入淺出WPF
- 小程序,巧運(yùn)營:微信小程序運(yùn)營招式大全
- Python 3破冰人工智能:從入門到實(shí)戰(zhàn)
- 深入淺出PostgreSQL
- Java程序設(shè)計(jì)
- Learning OpenCV 3 Computer Vision with Python(Second Edition)
- 實(shí)戰(zhàn)Java高并發(fā)程序設(shè)計(jì)(第2版)
- JavaScript程序設(shè)計(jì):基礎(chǔ)·PHP·XML
- Building Clouds with Windows Azure Pack
- ASP.NET Core 2 High Performance(Second Edition)