一、目标效果：
当浏览器窗口大小改变时。panel宽度始终为浏览器宽度的50%，panel高度则根据其中内容的多少而变化，横向竖向滚动条皆不出现。且不需要重新刷新浏览器或者其他js代码
兼容：chrom .ie7~11
二、代码：
关键API:fit属性设置为true.默认是false
API地址：http://www.jeasyui.com/documentation/index.php#
关于这个fit的解释，官方文档这么说的：
When true to set the panel size fit it's parent container. The example below shows a panel which can be auto resized to max inner dimensions of its parent container。
意思就是：让panel尺寸适应它的父元素尺寸。
官方API例子：html
1 <div class="wrapper"> 2 <div class="easyui-panel my-panel" title="标题" data-options="fit:true"> 3 <p>panel 内容111111111111111</p> 4 <p>panel 内容2222222222222222222</p> 5 <p>333333333333333333333333333333333333333</p> 6 </div> 7 </div>
css
.wrapper{
50%;/*让父元素的宽度为50%*/
/*高度不用设置*/
}
复制上述HTML和CSS代码到编辑器里，然后在浏览器中打开。。发现：panel宽度确实始终为浏览器的50%,因为父元素的宽度是50%,而panel在fit:true的作用下塞满了其父元素。
但是panel body中的文本不会自动换行，所以出现了横向滚动条。
为了解决这个问题,CSS上加入以下代码：
.wrapper{
50%;/*让父元素的宽度为50%*/
/*高度不用设置*/
word-wrap: break-word;
word-break: normal;/*让文字自动换行*/
}
但是，依旧有个问题：当缩小浏览器宽度到一定小时，会出现竖向滚动条。
所以，再加入以下css:
.wraper .panel-body{
height: auto !important;
}
这下子。再怎么缩小浏览器，这个panel都是自适应宽度，而且不会出现横竖向滚动条了。
总结：整合以上所有CSS和Html代码。完整例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>panel</title> <link rel="stylesheet" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"/> <link rel="stylesheet" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"/> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> <style> .wrapper{ width:50%;/*高度不用设置*/ word-wrap: break-word; word-break: normal; background-color:#444; } .wrapper .panel-body{ height: auto !important; } </style> </head> <body> <div class="wrapper"> <div class="easyui-panel my-panel" title="标题" data-options="fit:true"> <p>panel 内容111111111111111</p> <p>panel 内容2222222222222222222</p> <p>333333333333333333333333333333333333333</p> </div> </div> </body> </html>