天生我才必有用

如何实现在有限的空间内显示更多的内容呢？其实很多页面的实现上都考虑了这样的一个问题。

如Thickbox的官方页面中就大量使用了这种技术，对页面的局部内容实现滚动，从而使页面上可以显示更多的内容。

那如何实现这样的滚动呢？其实很实现简单。步骤如下：

1. 使用div标签来定义此区域的范围。
2. 在CSS中对此区域定义宽和高。
3. 在CSS中使用overflow属性来定义div的滚动。

现在我们来看一下如何定义overflow的属性，overflow的属性值可以为以下四种：

• overflow: auto – 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，包括水平、垂直或者两者都显示。不过只有当显示的数据内容超过定义的宽高时，滚动条才会显示。
• overflow: scroll – 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，但不管内容的多少，即使显示的内容很少，屏幕上也会显示一个Disable状态的滚动条。
• overflow: visible – 不剪切内容也不添加滚动条.
• overflow: hidden – 会对内容进行剪切，超过显示宽高的内容不会被显示。

可能常用的即时overflow:auto和overflow: scroll。当然此效果也可以使用iframe来实现，不过屏幕内容的刷新会是一个比较烦人的问题。

HTML:

<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p><span style="color: red;">This is red color</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

CSS:

div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}