html 右边是iframe 左右结构_如何通过单页实现类似iframe左右侧结构

1 2 

3 Virtual frame4 5 6 html, body7 {8 overflow:hidden;9 margin:0px;10 width:100%;11 height:100%;12 }13 14 .virtual_body15 {16 height:100%;17 overflow-y:scroll;18 overflow-x:auto;19 border:1px solid #bbbbbb;20 float:left;21 width:auto;22 }23 24 .fixed_div25 {26 position:absolute;27 z-index:2010;28 top:0px;29 left:0px;30 border:0px solid #fff;31 background-color:transparent;32 width:200px;33 height:100%;34 float:left;35 }36 p37 {38 width:600px;39 height:300px;40 border-bottom:1px solid #eeeeee;41 }42 43 #virtual_left_frame44 {45 width:300px;46 height:100%;47 float:left;48 }49 50 .warning51 {52 background-color:Yellow;53 border:1px solid red;54 }55 56 57 vargframe={58 init:function() {59 60 },61 get_boundary:function() {62 return{63 top:0,64 left:0,65 width: document.body.clientWidth,66 height: document.body.clientHeight67 };68 },69 resetLeftFrame:function(left_frame_id) {70 varleft_frame=document.getElementById(left_frame_id);71 left_frame.style.marginTop=document.body.scrollTop;72 alert(left_frame.style.marginTop);73 },74 resetRightFrame:function(left_frame_id, right_frame_id) {75 varleft_frame=document.getElementById(left_frame_id);76 varright_frame=document.getElementById(right_frame_id);77 if(right_frame) {78 varboundary=this.get_boundary();79 if(boundary) {80 right_frame.style.width=boundary.width-left_frame.clientWidth-20;81 }82 }83 }84 };85 functionOnLoad() {86 gframe.resetLeftFrame('left_frame');87 }88 89 90 91 92 

93