当页面有上下两个DIV层时,由于上面的DIV文字内容过多,超出该层的高度和宽度,此时上面的DIV层中的内容会覆盖到下面的DIV层之上。如下图:
此时该怎么解决呢?这就会用到CSS的一个很有用的属性—Overflow。该属性有四个值:
· visible(默认值)
· hidden
· scroll
· auto
Visible
Overflow的Visible属性是默认值,也就是说,最初说到的那种情况就是Visible在起作用。这里需要注意的是,虽然第一层的溢出的内容会覆盖到第二层之上,但是并不会将第二层挤出原来的位置。如上图。
Hidden
Hidden值与默认值相反,它会将所有超出DIV层范围的所有内容都给隐藏掉。如下图:
该属性对显示动态内容、由于内容溢出而引起一些布局上的问题的确很有用。但是,要记住用此方法隐藏的内容将彻底的看不到。比如:用户将他们的浏览器的默认字体调大,这将会使一些文字推到DIV层的外面被完全的隐藏。
Scroll
设置Overflow值为scroll将会在DIV层之内提供一个滚动条,从而可以查看到DIV层内所有的内容。如下图:
需要注意的是:使用Scroll将会同时产生水平和垂直两个滚动条,就算内容只需要其中的一个。而且如果该DIV层没有任何内容也会显示水平和垂直的禁用的滚动条。所以针对这种情况,Overflow又提供了Auto值。
Auto
Overflow的auto值与scroll很像,它唯一不同的是在DIV层中的内容不需要滚动条的时候不会出现滚动条,与普通的DIV没有区别;如果内容超出范围就会显示滚动条。