(^270) ❘ CHAPTER 10 SCROLLBARS
The markup in this example is straightforward. The scrollable content is contained in the
element with id name container; this container element is needed so that the size of the contents
exceeds the size of the container to allow for scrolling.
Within that container, the
element with the class name filler simply contains sample text to
help show movement when the container is scrolled.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
In addition to the scrollable content, the markup includes two
help show movement when the container is scrolled.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
In addition to the scrollable content, the markup includes two
elements with the class name
status-bar for use in displaying the scrollbar position values.
The style sheet presents this markup in such a fashion that the contents of the container require
more space than the container itself so that the browser can provide useful scrollbars for the con-
tainer. The following reviews each rule in the style sheet and explains why each is needed.
The and element are each given 100 percent width and height so that these both auto-
matically take up the entire viewport.
html,
body {
width: 100%;
height: 100%;
}
In the next rule, you give the document a Lucida Grande font, which is a Mac font commonly
used in Mac applications. If that font isn’t available, you can fall back on Arial, which is present
in Windows; otherwise, if that font is not present, you fall back on the generic sans-serif font. The
background is set to a shade of gray. The font color is set to a dark gray, and fi nally, the default
padding and margin are removed from the element, which is necessary to avoid scrollbars that
[http://www.it-ebooks.info](http://www.it-ebooks.info)
status-bar for use in displaying the scrollbar position values.
The style sheet presents this markup in such a fashion that the contents of the container require
more space than the container itself so that the browser can provide useful scrollbars for the con-
tainer. The following reviews each rule in the style sheet and explains why each is needed.
The and element are each given 100 percent width and height so that these both auto-
matically take up the entire viewport.
html,
body {
width: 100%;
height: 100%;
}
In the next rule, you give the document a Lucida Grande font, which is a Mac font commonly
used in Mac applications. If that font isn’t available, you can fall back on Arial, which is present
in Windows; otherwise, if that font is not present, you fall back on the generic sans-serif font. The
background is set to a shade of gray. The font color is set to a dark gray, and fi nally, the default
padding and margin are removed from the element, which is necessary to avoid scrollbars that
[http://www.it-ebooks.info](http://www.it-ebooks.info)