word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">寬度與高度

word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">本節內容主要討論的是關于寬度和高度都設置為100%的情況，為一個div盒子設置其寬度為100%，這樣寬度就會隨著瀏覽器的寬度調整進行自動適應，同時通過設置text-align：center可完成普通內容的水平居中。

如果為div盒子設置高度，div的實際高度是否會隨著瀏覽器的高度變化而自適應？

通過簡單案例4-2,example02.html來體驗,效果如圖4-4所示。

例4-2   example02.html

圖4-4 高度自適應的效果

可以看到，頁面的寬度是自適應整個瀏覽器的寬度的，但是高度卻并沒有自適應整個瀏覽器的高度，只能看到一條線，這條線是因為為div設置邊框而已。通過測試知道高度是無法通過設置百分比來進行自適應，如果div中有內容，高度才會自適應內容的高度。

如果想讓一個元素（盒子）的百分比高度height：100%起作用，則需要給這個元素的所有父元素的高度設定一個有效值，通過簡單案例4-3,example03.html來體驗,效果如圖4-5所示。

例4-3   example03.html

圖4-5 高度設置為100%的效果

效果得以實現，這里body和html的高度設置為98%是因為如果設置為100%，由于body的margin和padding的影響會出現滾動條，用戶無法看到div的邊框的全貌，僅此而已。