CSS - Scrollbars - 極客書

可能存在這樣的情況：元素的內容可能大於分配給它的空間量。例如，給定的寬度和高度屬性不允許有足夠的空間容納元素的內容。

CSS提供一個名爲overflow的屬性，該屬性告訴瀏覽器如果框的內容大於框本身，該怎麼做。此屬性可以採用以下值之一&負;

Sr.No.	Value & Description
1	可見的允許內容溢出其包含元素的邊框。
2	隱藏的嵌套元素的內容只在包含元素的邊界處被截斷，並且不顯示滾動條。
3	捲軸包含元素的大小不會改變，但會添加滾動條以允許用戶滾動查看內容。
4	自動其目的與scroll相同，但只有在內容溢出時才會顯示scrollbar。

下面是一個例子;

Live Demo

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

它將產生以下結果&負;