li.even {
background-color: #FCFCFC;
}
非常简单，它将产生上面所示的屏幕截图。当您希望向下滚动
<div class="top"> 中编号的行时，问题出现了：
解决滚动问题的方法似乎是使用
<div> 的
fixed 而不是
absolute 布局。div.bottom {
background-color: lightblue;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 20px;
}
/* …Rest of CSS styling */
这个细微的改动确实修复了玩具应用程序的屏幕显示问题，但是现在，同一个页面的打印版本中出现了一个令人不快的工件。为演示这个问题，我设置了一个极其短小的页面长度：
当然，我希望将各种媒体以适合其显示特征的方法显示出来，但同时仍然共享独立于媒体（某些）的可视属性。要同时实现正确地屏幕显示和打印显示，我所需做的就是使用
@media 规则创建一个稍微复杂一点的样式表：li.odd {
background-color: #EAEAFF;
}
li.even {
background-color: #FCFCFC;
}
@media screen {
div.bottom {
background-color: lightblue;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 20px;
}
div.top {
background-color: white;
}
}
@media print {
div.bottom {
position: absolute;
top: 0px;
}
div.top {
position: relative;
top: 20pt;
}
}
可以看到，奇偶行的颜色保持不变，但是
top 和
bottom
<div> 元素的特定位置针对媒体的不同做了调整。产生如图 4 的效果：
令人高兴的是，屏幕仍然保持其正确的显示状态。
