受 float div 影响的 jQuery 标题栏高度

Question

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

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

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

我有一个带有这个 css 的 body 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 网格放入主体中时，它的标题栏会拉伸(stretch)以匹配导航 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; 应用于变得太大的 block ，看看是否能解决问题？