HTML and CSS Reference
In-Depth Information
body {
background: #fff;
border: 1px solid #333;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: 2px 2px 30px #666;
-moz-box-shadow: 2px 2px 30px #666;
-webkit-box-shadow: 2px 2px 30px #666;
height: 450px;
margin: 20px auto;
padding: 0 20px;
width: 600px;
}
form, fieldset {
border: none;
margin: 0;
padding: 0;
}
#messageForm input {
padding: 3px;
width: 592px;
}
#messages {
height: 300px;
overflow: auto;
}
15.6.1.2 Fixing the Scrolling
As we noted earlier, the client eventually gains a scroll and adds messages below
the fold. With the updated stylesheet, the scroll is moved to the definition list that
contains the messages. In order to keep the message form visible, we put a restraint
on its height. Because we're more interested in new messages popping in, we will
tweak the message list controller to make sure the definition list is always scrolled
all the way to the bottom.
We can scroll the list to the bottom by setting the
scrollTop
property to its
maximum value. However, we don't need to determine this value exactly; all we need
to do is set it to some value equal to or greater than the max value, and the browser
will scroll the element as far as possible. The
scrollHeight
of an element seems
