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