页面的等比缩放

样式：
<style type="text/css">
*{ margin:0; padding:0;}

html,body{
 padding:0px!important;
 padding:0px 0px;
 width:100%;
 height:100%;
 overflow:hidden;
}


#middle{ 
 position: absolute!important;
 top:0px!important;
height:auto!important; 
 position: relative;
 top:-100px; 
 height:100%;  
 bottom:0px;
 width:100%;
 background:#ffc;
 text-align:center;
 overflow: auto;
}

#one{

padding-top:0px;
 height:80%;  
 bottom:100px;
 width:70%;
  background:#CF3;
 text-align:center;
 overflow: auto;
}
#two{
 height:100%;  
 bottom:100px;
 width:30%;
 text-align:center;
 background:#F36;
 overflow: auto;
}
#tre{
 height:20%;  
 bottom:100px;
 width:70%;
 text-align:center;
 background:#3CC;
 overflow: auto;
}
#tex{
 width:100%;
 height:100%;
 margin-left:0px;
 margin-top:10px;
 
	}
</style>
界面： <form id="form1" runat="server">


    <div id="middle">
    <div id="one" style=" float:left;">1</div>
    <div id="two" style=" float:right;">2</div>
 
    <div  id="tre" cellspacing="0" cellpadding="0" style="word-break:break-all">
    <input type="text" class="form-control" id="tex" style="column-count:3">
    </input>
    
  </div>
    
     </div>
    
    
</form>