jQuery标题栏高度受浮动div影响

Question

我遇到了一个非常奇怪的 jQuery 问题。

我有一个带有此 css 的左侧导航 div：

#nav {
  float: left;
  width: 25%;
  padding: 10px;
  margin-top: 1px;
}

我有一个带有此 css 的主体 div：

#body {
  margin-left: 30%;
  margin-top: 1px;    
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */     
}

对于 JQuery，我使用 struts 插件

sjg:grid
    id="gridtable"
    caption="Customer Examples"
    dataType="json"
    href="%{remoteurl}"
    pager="true"
    gridModel="gridModel"
    rowList="10,15,20"
    rowNum="-1"
    rownumbers="true"
    editurl="%{editurl}"
    editinline="true"
    onSelectRowTopics="rowselect"
    onEditInlineSuccessTopics="oneditsuccess"
    viewrecords="true"   

当我将 jQuery 网格放入主体中时，其标题栏会拉伸以匹配导航 div 的高度。如果我删除左侧导航，网格显示正常。

我已经尝试了一切并用谷歌搜索，直到我脸色发青。

我将非常感谢任何提示。

---

编辑添加：

struts grid tag opens into
jQuery(document).ready(function () { 
    jQuery.struts2_jquery.require("js/struts2/jquery.grid.struts2"+jQuery.struts2_jquery.minSuffix+".js");
    var options_gridtable = {};
    var options_gridtable_colmodels = new Array();
    var options_gridtable_colnames = new Array();

    options_gridtable_colmodels_id = {};
    options_gridtable_colmodels_id.name = "id";
    options_gridtable_colmodels_id.jsonmap = "id";
    options_gridtable_colmodels_id.index = "id";
    options_gridtable_colmodels_id.formatter = "integer";
    options_gridtable_colmodels_id.editable = false;
    options_gridtable_colmodels_id.sortable = false;
    options_gridtable_colmodels_id.resizable = true;
    options_gridtable_colmodels_id.search = true;
    options_gridtable_colnames.push("ID");
    options_gridtable_colmodels.push(options_gridtable_colmodels_id);

    options_gridtable_colmodels_name = {};
    options_gridtable_colmodels_name.name = "name";
    options_gridtable_colmodels_name.jsonmap = "name";
    options_gridtable_colmodels_name.index = "name";
    options_gridtable_colmodels_name.editable = false;
    options_gridtable_colmodels_name.sortable = true;
    options_gridtable_colmodels_name.resizable = true;
    options_gridtable_colmodels_name.search = true;
    options_gridtable_colnames.push("Name");
    options_gridtable_colmodels.push(options_gridtable_colmodels_name);
    options_gridtable.datatype = "json";
    options_gridtable.url = "/moneypulse2app/person/jsontable.action";
    options_gridtable.height = 'auto';
    options_gridtable.pager = "gridtable_pager";
    options_gridtable.pgbuttons = true;
    options_gridtable.pginput = true;
    options_gridtable.rowNum = -1;
    options_gridtable.rowList = [10,15,20];
    options_gridtable.viewrecords = true;
    options_gridtable.editinline = true;
    options_gridtable.caption = "Customer Examples";
    options_gridtable.autoencode = true;
    options_gridtable.rownumbers = true;
    options_gridtable.onselectrowtopics = "rowselect";
    options_gridtable.oneisuccess = "oneditsuccess";

    options_gridtable.colNames = options_gridtable_colnames;
    options_gridtable.colModel = options_gridtable_colmodels;
    options_gridtable.jsonReader = {};
    options_gridtable.jsonReader.root = "gridModel";
    options_gridtable.jsonReader.page = "page";
    options_gridtable.jsonReader.total = "total";
    options_gridtable.jsonReader.records = "records";
    options_gridtable.jsonReader.repeatitems = false;

    options_gridtable.jqueryaction = "grid";
    options_gridtable.id = "gridtable";

    jQuery.struts2_jquery_grid.bind(jQuery('#gridtable'),options_gridtable);

 });

由于所有 jquery 脚本，在 jsfiddle.net 上共享它有点困难。 可能这个 HTML 部分会澄清一些事情：

<div style="width: 325px;" class="ui-state-default ui-jqgrid-hdiv">
  <div class="ui-jqgrid-hbox">
    <table cellspacing="0" cellpadding="0" border="0" aria-labelledby="gbox_gridtable" 
           role="grid" style="width: 325px;" class="ui-jqgrid-htable">
      <thead>
        <tr role="rowheader" class="ui-jqgrid-labels">
          <th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" 
              id="gridtable_rn" style="width: 25px;">
            <div id="jqgh_rn">
              <span style="display:none" class="s-ico">
                <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" 
                      sort="asc"></span>
                <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" 
                      sort="desc"></span>
              </span>
            </div>
          </th>
          <th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" 
              id="gridtable_id" style="width: 143px;">
            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" 
                  style="cursor: col-resize;">&nbsp;</span>
            <div id="jqgh_id" class="ui-jqgrid-sortable">
              ID
              <span style="display:none" class="s-ico">
                <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" 
                      sort="asc"></span>
                <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" 
                      sort="desc"></span>
              </span>
            </div>
          </th>
          <th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" 
              id="gridtable_name" style="width: 142px;">
            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" 
                  style="cursor: col-resize;">&nbsp;</span>
            <div id="jqgh_name" class="ui-jqgrid-sortable">
              Name
              <span style="display:none" class="s-ico">
                <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" 
                      sort="asc"></span>
                <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" 
                      sort="desc"></span>
              </span>
            </div>
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

另外，在 firebug 中播放后，似乎更改网格标题上的这个 css 项目可以在一定程度上解决问题：

.ui-helper-clearfix {
    display: block;
}

如果我删除 display: block - 标题会缩小到适当的高度但宽度较小。

Answer 1

正如所评论的，如果您删除与问题无关的 HTML 和 jQuery 代码，会更容易提供帮助。复制 HTML 文件并尽可能删除，但问题不会消失。完成此操作后，编辑您的问题并用较短的版本替换旧代码。

您是否尝试将 overflow:visible; 应用到变得太大的块，看看是否可以解决问题？

Answer 2

我刚刚也遇到了 jquery 对话框的这个问题 - 许多浮动 div 导致对话框标题的高度增加。添加溢出：隐藏；为我解决了问题 - 标题高度变得恒定。