我有一个非常奇怪的jQuery问题。
我有一个左侧导航div与此css：
#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的高度。如果我删除左侧导航，网格显示正常。
我已经尝试了所有东西并用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;"> </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;"> </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 - 标题缩小到适当的高度但是宽度很小。
答案 0 :(得分：2)
如评论所述，如果删除与问题无关的HTML和jQuery代码，将会更容易提供帮助。复制HTML文件并尽可能删除，而问题不会消失。完成此操作后，请编辑您的问题，并用较短的版本替换旧代码。
代替看到这一点，您是否尝试将overflow: visible;应用于增长过大的块，并查看是否能解决问题？
答案 1 :(得分：1)
我刚刚使用jquery对话框遇到了这个问题 - 许多浮动div导致对话框的标题高度增长。添加溢出：隐藏;为我解决了问题 - 标题高度变得不变。