5.6　内容栏的使用

上一节介绍了工具栏中一个名为data-fullscreen的属性，可能有些读者会感觉一头雾水，下面先来看范例5-8的内容。

【范例5-8　在页面中加入内容栏】

运行结果如图5-20所示。

读者请先将上一节中的范例效果同样拖曳到最顶端，界面如图5-21所示。将两个界面做一下简单的对比，会发现笔者之前特意截取掉的侧面进度条又显示了出来（这部分只在PC端会有，手机浏览器上不显示），这是有一定目的的。

首先，通过侧面的进度条可以知道两个页面都被拖曳到了最顶端，可是在图5-20的第一行字的顶端与头部栏的底端仍有一定的距离。而图5-21中第一行字的顶端却直接顶在了屏幕的顶端，这是第一点不同之处。

图5-20　内容栏的使用

图5-21　工具栏加入了fullscreen属性

其次，可以看到图5-20的内容左侧明显多出了一部分外边距，这是因为fullscreen属性使页面内其他内容可以忽略工具栏的存在而全屏显示。

事实上，内容栏的存在还有一个“隐性”的作用，请读者看本例在Notepad++中的代码截图，如图5-22所示。页面的缩进结构非常清晰明确，大大加强了页面的可维护性，这一优势现在还看不出来，但是在今后大型应用的开发中将会体现得越来越明显。

图5-22　本范例代码截图