初学者简单学习CSS网页布局
| kground-color: #eee;
border:1px solid #000; width:300px; height:200px; } #sec { background-color: #eee; border:1px solid #000; width:50%; height:25%; } </style></head> <body> <div id="fst">这是固定尺寸的宽度和高度</div> <hr /> <div id="sec">这是自适应尺寸的宽度和高度</div> </body> </html> 为了更方便看到div的表现，笔者给2个div都设置了浅灰色背景色和黑色边框，在浏览器地址栏输入http://localhost/div_2.htm，浏览效果如图11.3所示。
图11.3 设置div样式 很明显，第1个div宽度和高度固定，形成了一个“坚硬”的盒子。而第2个div由于设置其宽度为50%，其宽度随着浏览器的宽度变化而变化。但是问题出现了，第2个div的高度虽然设置为25%，按理说其高度应该随着浏览器的高度变化而变化。然而在示例中div高度仅和文本高度相当，好像高度设置没有起作用。 其实设置高度自适应有一个前提，div的高度自适应是相对于父容器的高度，本例中div父容器为body或者html（不同浏览器解析方式不同）。body或者html在本例中没有设置高度，div的高度自适应没有参照物，也就无法生效。 接下来在CSS中设置body和html的高度，就可解决div的高度自适应问题。body和html的高度直接设置为100%即可，不会对页面有任何影响。在div_2.htmd的CSS部分加入如代码11.4所示的代码。
代码11.4 设置div样式：div_2.htm
html,body{height:100%;} 为了考虑多种浏览器的兼容性，html和body同时设置100%宽度。在浏览器地址栏输入http://localhost/div_2.htm，浏览效果如图11.4所示。 调整浏览器高度后，第2个div的高度随之变化。各种浏览器对XHTML和CSS的解析方式有差异，在后面将详细讨论解决办法，以解决浏览器的兼容性问题。
图11.4 设置div标签高度自适应 11.1.4 布局页面的宽度 由于浏览者的显示分辨率不同，浏览者常见显示分辨率（单位：像素）为800×600、1024×768、1280×1024、1440×960等。所以在布局页面时，要充分考虑页面内容的布局宽度，一旦内容宽度超过显示宽度，页面将出现水平 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
