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的边框的全貌，仅此而已。