easyui 自适应 fit属性_fit="true-优快云博客

本文详细解析了在使用EasyUI框架时如何正确配置layout组件的fit属性来确保其能够根据父容器的尺寸进行适配。特别强调了当外部容器没有设定固定尺寸时，内部layout组件的表现及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:如果设置了fit=true就会去匹配外层的高宽

[html]view plaincopy 
   
 <div id="mytabs" class="easyui-tabs" fit="true" border="false">  
 <div  title="div2"  >   
         <div id="xx" class="easyui-layout" fit="true" border="false">    
               <div region="north" title="条件" split="true" style="height:100px;padding-top:20px">  
               </div>    
               <div region="center"  style="padding:5px;background:#eee;">  
               </div>    
         </div>  
 </div>   
 </div>  

例如此时将此作为tabs的子页就会被显示，是因为tabs默认有自己的宽高，他的子页面div2是一个标题他适应呀所有layout会被显示

因为此时不管怎么设置div2的宽高都不会影响layout的宽高

但如果外层是一个普通div 没有easyui设置的默认高宽，layout就会依赖他

[html]view plaincopy 
   
 <div  title="div2" style="width:100px;"   >   
         <div id="Div2" class="easyui-layout" fit="true" border="false">    
               <div region="north" title="条件" split="true" style="height:100px;padding-top:20px">  
               </div>    
               <div region="center"  style="padding:5px;background:#eee;">  
               </div>    
         </div>  
 </div  

所以此时div2就设置为宽度100

所以要注意如果此时div2没有设置宽高的或layout就不会显示了 -。-找了很久的原因

特别是作为tabs时的子页面要注意

也可以在第一个例子的基础上在套一个普通的div他layout能不能被显示

例如

[html]view plaincopy 
   
 <div id="mytabs" class="easyui-tabs" fit="true" border="false">  
 <div  title="div2" >   
        <div><!--这里套一个普通div，因为他没有设置高宽所以里边的layout不会被显示-->  
         <div id="Div2" class="easyui-layout" fit="true" border="false">    
               <div region="north" title="条件" split="true" style="height:100px;padding-top:20px">  
               </div>    
               <div region="center"  style="padding:5px;background:#eee;">  
               </div>    
         </div>  
         </div>  
 </div>   
 </div>  