9
我有一个非常奇怪的jQuery问题。jQuery标题栏高度受浮动div影响
我有这个CSS一个左侧导航栏的div：
#nav {
float: left;
width: 25%;
padding: 10px;
margin-top: 1px;
}
我有一个身体div使用该CSS：
#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);
});
这是有点难以分享它jsfiddle.net因为所有的jQuery脚本。 可能是这个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>
此外，萤火虫玩后似乎改变网格头这个CSS项目有所解决了这个问题：
.ui-helper-clearfix {
display: block;
}
如果我删除显示：块 - 标题收缩到适当的高度，但宽度很小。
你的jquery代码也会有帮助。 – Basic 2011-04-04 22:20:28
请在jsfiddle.net中创建一个小例子。说出当时的情况会容易得多。 – 2011-04-05 00:30:01
如果你不漂浮导航，网格是否真的变大了？ – 2011-06-02 06:17:13