easyui panel自适应浏览器宽度

一、目标效果：

当浏览器窗口大小改变时。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>