jQuery MiniUI

标题: 如下代码，会出现滚动条，应该让#tabs1占用除标题外的整个 [打印本页]

作者: python 时间: 2014-2-24 09:55:56 标题: 如下代码，会出现滚动条，应该让#tabs1占用除标题外的整个

<body>
<h2>标题标题标题</h2>
<div id="tabs1" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" bodyStyle="padding:0;border:0;">
<div title="Tab1">

      <div class="mini-toolbar" style="padding:2px;border:0;">
         <table style="width:100%;">
            <tr>
            <td style="width:100%;">
                  <a class="mini-button" iconCls="icon-save" plain="true">保存</a>
                  <a class="mini-button" iconCls="icon-close" plain="true">关闭</a>
                  <span class="separator"></span>
                  <a class="mini-button" iconCls="icon-reload" plain="true">刷新</a>
            </td>
            <td style="white-space:nowrap;"><label style="font-family:Verdana;">名称: </label>
                  <input class="mini-textbox" />
                  <a class="mini-button" iconCls="icon-search" plain="true">查询</a>
                  </td>
            </tr>
         </table>
      </div>

      <div class="mini-fit">
         <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
            url="../data/AjaxService.aspx?method=SearchEmployees"  idField="id"
            sizeList="[5,10,20,50]" pageSize="10"
         >
            <div property="columns">
                  <div type="indexcolumn" ></div>
                  <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
                  <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
                  <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
                  <div field="salary" width="100" allowSort="true">薪资</div>
                  <div field="age" width="100" allowSort="true">年龄</div>
                  <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
            </div>
         </div>
      </div>

</div>
<div title="Tab2" iconCls="icon-cut" >
      2
</div>
<div title="Tab3" showCloseButton="true">
      3
</div>
</div>

<script type="text/javascript">
      mini.parse();

      var grid = mini.get("datagrid1");
      grid.load();

</script>

</body>

作者: factory 时间: 2014-2-24 10:12:13

style="width:100%;height:100%;" 高度百分百,是等于父元素的高度的100%,而不是自动撑满剩余高度,你内部还有其他有高度的元素,自然撑破有滚动条了.这个是CSS最基本的特性.

你要做撑满剩余效果,用mini-fit

http://www.miniui.com/demo/#src=fit/fit.html

作者: felt 时间: 2014-2-24 10:25:23

tabs外面再加一层fit
还有把这个css加上
<style type="text/css">
html, body{
margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
}
</style>

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)