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网格时,其标题栏会拉伸以匹配nav div的高度.如果我删除左侧导航,网格显示正常.

我已经尝试了一切并用Google搜索,直到我脸色发青.

我非常感谢任何提示.

---

编辑添加:

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;到变得太大的块，看看是否可以解决问题？