八、两列固定宽度居中与高度自适应
要实现两列固定宽度居中的布局，其实很简单，在第四节及第六节教程中已经提到，我们只要把两个固定列丢在一个div对象中去，实现嵌套就可以了，修改后的码如下：
程序代码
如下图上所示：
在很多情况下我们讨论对象横向排列的次数比较多，包括宽度的自适应。但有些时候也会用到高度的自适应问题，其实在实现高度自适应的过程中，往往会遇到很多不正常的现象，这与浏览器的解析有关，我们直接看如下css代码：
程序代码
如上图下部分看实现效果!
注意：问题的关键在于第一句代码：
程序代码
我们同时设定了html和body的高度均为100%,这是实现高度自适应的关键。一个对象的高度可以用百分比来显示，但要取决于它的父对象的高度而#layout放在了body中，只有我们对其父对象设置了100%的高度时，子对象的相对高度才生效。
单独为body设置了100%的高度，在IE下可以实现高度自适应，但在Firefox下仍不能实现，所以也为html设置了100%的高度。这是浏览器解析的问题，加上这一句为的就是能让其在两个浏览器下都正常显示。
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#layout{margin:0px auto;width:304px;}
#left,#right{float:left;background-color:#eeeeee;border:1px dashed #33ccff;width:150px;height:200px}
-->
</style>
</head>
<body>
<div id="layout">
<div id="left">我是layout对象下的左栏</div>
<div id="right">我是layout对象下的左栏</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#layout{margin:0px auto;width:304px;}
#left,#right{float:left;background-color:#eeeeee;border:1px dashed #33ccff;width:150px;height:200px}
-->
</style>
</head>
<body>
<div id="layout">
<div id="left">我是layout对象下的左栏</div>
<div id="right">我是layout对象下的左栏</div>
</div>
</body>
</html>
如下图上所示：
在很多情况下我们讨论对象横向排列的次数比较多，包括宽度的自适应。但有些时候也会用到高度的自适应问题，其实在实现高度自适应的过程中，往往会遇到很多不正常的现象，这与浏览器的解析有关，我们直接看如下css代码：
程序代码html,body{margin:0px;height:100%;}
#layout{margin:0px auto;background-color:#cecece;width:304px;height:100%;}
#layout{margin:0px auto;background-color:#cecece;width:304px;height:100%;}
如上图下部分看实现效果!
注意：问题的关键在于第一句代码：
程序代码html,body{margin:0px;height:100%;}
我们同时设定了html和body的高度均为100%,这是实现高度自适应的关键。一个对象的高度可以用百分比来显示，但要取决于它的父对象的高度而#layout放在了body中，只有我们对其父对象设置了100%的高度时，子对象的相对高度才生效。
单独为body设置了100%的高度，在IE下可以实现高度自适应，但在Firefox下仍不能实现，所以也为html设置了100%的高度。这是浏览器解析的问题，加上这一句为的就是能让其在两个浏览器下都正常显示。
浙公网安备 33010602011771号