8.布局

8.1 容器

　　建议用 <div> 作为 <Object> 元素的容器, 这样我们只要处理好 <div> 的布局就行, 例如下面就是常见的写法:

<div style="position:relative;width:96%;height:400px">
    <script>insertReport('AF', '')</script>
</div>

　　如果 div 容器的位置和大小变化了，Object也会跟着变化; 容器隐藏了，Object也会跟着隐藏。
　　此外, 也可以用 <table> 的 <TD>作为容器:

...
<tr height="400px">
 <td height="400px">
  <script>insertReport('AF', '')</script>
 </td>
</tr>
...

8.2 容器注意事项

　　div 容器的初始高度是不能采用百分比的，必须采用像素, 如下的写法是有问题的：

<div style="position:relative;width:96%;height:70%">
    <script>insertReport('AF', '')</script>
</div>

　　上例中 div 的初始高度为百分比(70%) 将导致较为严重的结果，具体症状表现为控件无法显示、或者每10次中有1、2次显示不出来，需要手工刷新页面.
　　正确的做法是设定一个固定的像素高度，然后在页面的 resize 事件中计算出分配给它的高度，动态更改高度, 下面是简单的自适应高度的例子：

<html>
<head>
<script src="binary/dynaload.js"></script>
<script>
 function autoResize()
 {
   var dv = document.getElementById('main');
   var height = (document.documentElement.clientHeight - 30) + 'px';
   dv.style.height  = height;
 }
 window.onload = function() {
   autoResize();
 }
 window.onresize = function() {
   autoResize();
 }
</script>
</head>
<body>
<div id="main" style="position:relative;width:100%;height:380px">
 <script>insertReport('AF','')</script>
</div>
</body>
</html>

宽度 (width) 允许采用百分比.

8.3 更复杂的场景

　　由于<Object>是一种特殊的元素，它的高度相对于容器是100%的，在某些情况下，比如页面布局较为复杂、页面中有多个控件，此时 <Object> 的初始高度有时未必会跟着变化，所以，我们也可以采用固定的像素数，将上述的脚本改成如下的形式：

<div style="position:relative;width:96%">
    <script>insertReport('AF', '', '400px')</script>
</div>

　或

...
<tr height="400px">
 <td>
  <script>insertReport('AF', '', '400px')</script>
 </td>
</tr>
...

　　insertReport( ) 的第三个参数是隐含参数，其含义是<Object>的初始高度，您分析一下 dynaload.js 就能知道这个原理.

　　当您需要动态修改 <Object> 的高度时，可以直接修改它的 height 属性，比如:

AF.height = '230px';
//或者
AF.height = 230;

如果您把插件/加载项安置在<Form>中，在IE下可能会遇到问题，请参见底下的 “10.不同浏览器之间的一些差别”.

8.4 其它注意事项

　　容器的书写，尽可能保持单一、简洁，不要将其它元素混杂在一起，如下写法就非常不妥：

<div style="position:relative;width:96%;height:400px">
 <script>
  insertReport('AF', '');
  alert('...');
 </script>
 <input type='button' value='Text'>
</div>