我有一个具有以下 CSS 属性的包装器 DIV：
height: auto !important;
margin: 0 auto -125px;
min-height: 100%;
在那个 DIV 里面，我还有另外两个 DIV。第一个是与页面左侧对齐的菜单，具有以下 CSS 属性：
float: left;
width: 160px;
菜单右侧应显示页面内容。这是另一个DIV。如果我只是在其中输入一些内容（一些静态文本），一切都很好（即，它出现在菜单的右侧并跨越屏幕的其余部分）。但是，如果我允许 Kendo 网格填充它，它会破坏菜单，并且要么占据整个屏幕（如果我不使用任何 CSS 属性），甚至延伸到菜单下方（即使它只包含一行数据），或者它显示为菜单右侧的一个很小的区域，具体取决于我将“显示”设置为什么。
这个 DIV 在 IE 中显示得很好（即，它出现在菜单的右侧并占据了屏幕空间的剩余部分，与浏览器宽度无关——当我调整浏览器大小时，网格列也会调整大小）。我如何让它在 Chrome 中也能正常工作？
更新：
我删除了 IE 的浏览器数据，结果发现这在 IE 中也被破坏了。
更新：
这是一些代码和一些屏幕截图：
<body>
<div class="wrapper">
<div id="sidebar" class="hidden">
<ul id="sidebarItems">
<li><a href="/Labor/1234" id="navMenuItemLabor">Labor</a></li>
<li><a href="/Sales/1234" id="navMenuItemSales">Sales</a></li>
<li><a href="/Quotes/1234" id="navMenuItemQuotes">Quotes</a></li>
<li><a href="/Price/1234" id="navMenuItemPrice">Price</a></li>
<li><a href="/PurchaseOrder/1234" id="navMenuItemPurchaseOrder">Purchase Order</a></li>
<li><a href="/Catalog/1234" id="navMenuItemCatalog">Catalog</a></li>
</ul>
</div>
<div id="grid"></div>
<script type="text/javascript">
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: '/Sales/GetSalesHistory/1234',
dataType: "json",
type: "GET",
data: { id: "1234" }
}
},
pageSize: 15,
schema: {
data: "data",
total: "total"
}
},
columns: [
{ field: "DateString", title: "Date" }
],
pageable: true,
sortable: true
});
</script>
<script type="text/javascript">
// Show the side menu.
$("#sidebar").removeClass("hidden").addClass("visible");
// Highlight menu item for current page.
$("#sidebar a").removeClass("SelectedNavItem").addClass("UnselectedNavItem");
$("#navMenuItemSales").removeClass("UnselectedNavItem").addClass("SelectedNavItem");
</script>
<div class="push"></div>
</div>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"> </script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$("#topmenu").kendoMenu({
dataSource:
[
{
text: "Home",
url: "/"
},
{
text: "Search",
url: ""
},
{
text: "Admin",
url: ""
}
]
});
$("div.detailsMenuItem").hover(
function ()
{
$(this).addClass("HoverSidebar");
},
function ()
{
$(this).removeClass("HoverSidebar");
}
);
</script>
</body>
</html>
截图
它应该看起来如何（除了自动跨越可用的屏幕宽度）——这个 CSS 是：向左浮动，宽度 500
这里是：向右浮动，宽度 500
这是：向左浮动
如果我没有指定任何属性（如果我只输入一点文本，这在没有网格的情况下也可以工作）：
