在上面的众多实例中，我们都是在讨论横向的对象之间的排列组合方式，包含横向的宽度自适应问题，但是如何实现高度自适应呢？实际上许多初学者在初次尝试高度自适应时要遇到过这个问题，对象的height:100%;并不能够直接产生实际效果，那么是不是浏览器不支持height:100%;的编写方法？当然不是。高度值同样可以使用百分比进行设置，不同的是，之所以直接使用height:100%;不能达成效果，与浏览器的解析方式有一定关系，我们不妨直接看一段实现了高度自适应的CSS代码：天津网站建设，天津网站优化，汽车玻璃，天津二手装载机，商业策划招商
html,body{
margin:0px;
height:100%
}
#left{
background-color:#cccccc;
width:300px;
height:100%
float:left;
}
代码非常简单，对#left对象设置了height:100%，然而也能够看见，同时设置了HTML与body的height:100%;，而这个就是高度自适应问题的关键所在。一个对象高度是否可以使用百分比显示，取决于对象的父级对象，#left在页面中直接放置在body之中，因此它的父级是body，而浏览器默认状态下，是没有给body一个高度属性的，因此当我们直接设置#left为height:100%;时，不会产生任何效果，而当我们给body设置了100%之后，它的子极对象#left的height:100%;变发生作用了，这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外，还给HTML对象也应用相同的样式设计，这样做的好处是使IE与Firefox浏览器都恩那个狗实现高度自适应，IE与Firefox对页面中对象的解析放置存在一定的差异，在IE中HTML对象默认为100%的高度，而body却不是，而Firefox之中HTML标签就不是100%高度，因此哦我们给两个标签都定义为height:100%;以保证两个浏览器下均能够工作正常。
这样，本章中的最后一个问题，高度自适应问题便得到了解决，在前面我们也探讨了1列与三列、浮动定位与绝对定位的问题，因此，结合高度自适应，我们应当能够灵活的应用不同结构的div，以及及定位及适应方式，从而实现其他任意种类的布局设计。
如何制作复杂的页面布局？
不管多么复杂的页面布局设计，总是以div为基础，通过几个div之间的组合与嵌套来实现。因此在思考较复杂的页面布局之时，我们总是由粗到细逐步思考，通过1列、二列、3列这些基础的布局方式来相互组合从而实现复杂的布局。在前面哦我们呢曾见过一个网站名为UXMagazine（uxmag.com）,该网站便是复杂布局的一个代表，我们不妨以此网站为例来了解一下其复杂布局的实现方式。
UXMagazine网站看上去由无数个方块组成，似乎从div的构成上相当复杂，的确，如果实现这样的设计，需要大量的div来划分不同的区域。但是这种布局方式的思考过程是简单而且单一的，只需要使用1列、二列这些基本思路便可以完成这样的布局。让我们来看看他是如何完成这样的页面样式设计。
页面主容器
我们注意到，UXMagazine网站实际上是一个居中的页面布局，所以内容都是固定宽度，我们曾从1列及二列居中实例中了解过，如果需要整体居中，就一定需要一个div作为页面的主要框架，也就是一个包含容器。而UXMagazine也正是主样，在设计中使用了一个主div作为全页的框架id为container，见图。