页内内容区域滚动html,实现页面局部内容滚动

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

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

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

使用div标签来定义此区域的范围。

在CSS中对此区域定义宽和高。

在CSS中使用overflow属性来定义div的滚动。

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

overflow: auto - 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，包括水平、垂直或者两者都显示。不过只有当显示的数据内容超过定义的宽高时，滚动条才会显示。

overflow: scroll - 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，但不管内容的多少，即使显示的内容很少，屏幕上也会显示一个Disable状态的滚动条。

overflow: visible - 不剪切内容也不添加滚动条.

overflow: hidden - 会对内容进行剪切，超过显示宽高的内容不会被显示。

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

HTML:

This is a scrolling are created with the CSS property overflow.

This is red colorLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.

This is a normal paragraph.This is big bold text

This scrolling are can contain normal html likelink

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.