下载掌阅APP，畅读海量书库
立即打开
1.16 实现左右div自适应相同高度
前端网页设计中经常会出现这样一个问题：页面左侧导航只有几个链接，而且很短，页面右侧的正文部分却可能会很长，这导致页面布局很难看、不协调。怎么才能让页面左侧导航高度能随着页面右侧正文高度的增加而自动调整呢？解决方案就是让页面左右两侧的div高度能自动调整且保持一致。本例演示效果如图1.25所示。
图1.25 实现左右div自适应
本例主要代码如下：
本例关键代码是第26~30行。offsetHeight属性用于获取对象相对于版面的高度或由父坐标属性指定的高度，针对不同的浏览器可以理解如下：
● IE、Opera浏览器定义的offsetHeight属性是网页内容高度+滚动条+边框的总和。
● Firefox浏览器定义的offsetHeight属性是网页内容实际高度。
提示： 以上代码是基于DTD HTML 4.01 Transitional标准实现的。如果是DTD XHTML 1.0 Transitional标准则意义又会不同，在XHTML中offsetHeight属性表示内容的实际高度。另外，新版本的浏览器大多支持根据页面指定的DOCTYPE来启用不同的解释器。