div自動撐開（或者自適應）

標籤：style   class   blog   code   ext   color   

　　<div> 是一個區塊層級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現（摘自W3C school）。在編寫頁面的時候（這裡是指jsp），有遇到div標籤不能隨著內部的內容擴充本身大小的情況，藉助div標籤的height和overflow屬性，可以完美解決問題。

情況一：布局的時候設定了div的寬度和高度，但高度不夠：

    <div style="width: 800px;height:150px;background-color: gray;margin: auto">        <div style="height: 50px;width: 200px;background-color: red;float: none">red</div>        <div style="height: 40px;width: 250px;background-color: green;float: none;display: block">green</div>        <div style="float: left;margin-left: 10px;margin-top: 10px">            <table border="5" bordercolor="greenyellow" style="width: 300px;height: 100px;">                <tr>                    <td style="border: 2px solid greenyellow;padding: 0px;" align="center" width="200">                        aaaaaaaaaaaaaaaaa                    </td>                    <td style="border: 2px solid blue;padding: 0px;" align="center">                        bbbbbb                    </td>                </tr>            </table>        </div>    </div>

　　實際效果如下（firefox上）：

圖一

將最外圍的div的height設定為auto，就能解決問題：

圖二

　　overflow屬性則是用來控制超出容器邊框範圍的內容的顯示方式，允許的取值有：

值	描述
visible	預設值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其餘內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。
auto	如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

　　預設取值是visible，這就是為什麼圖一中table超出div的部分還是顯示出來，但是div本身大小沒有改變。如果不想改變div的高度，可以設定overflow為auto，效果如下：

圖三