Question

我有一个带有以下CSS属性的包装器DIV：

height: auto !important;
margin: 0 auto -125px;
min-height: 100%;

在DIV内部，我还有另外两个DIV。第一个是与页面左侧对齐的菜单，具有以下CSS属性：

float: left;
width: 160px;

菜单右侧应显示页面内容。这是另一个DIV。如果我只是输入一些内容（一些静态文本），一切都很好（即，它出现在菜单的右侧并跨越屏幕的其余部分）。但是，如果我允许Kendo网格填充它，它会破坏菜单，并占据整个屏幕（如果我不使用任何CSS属性）甚至扩展到菜单下方（即使它仅包含菜单）一行数据），或者它显示为菜单右侧的一个小区域，具体取决于我设置的内容＆＃34;显示＆＃34;如

这个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是：Float left，width 500

Float left, width 500

这是：向右浮动，宽度为500

Float right, width 500

这是：向左浮动

Float left

如果我没有指定任何属性（如果我只输入一些文本，这可以不使用网格）：

No CSS in the grid's DIV

Answer 1

display:table为我解决了Chrome问题。使用显示：内联容器div。两个并排的显示表在Chrome，IE和FF中正确显示。

Answer 2

1）你很困惑：）

2）试试这个......

<div id="wrapper">

    <div class="menu">
      your menu
    </div>

    <div class="content">
      your content
    </div>

</div>

的CSS：

#wrapper {display: table; width: 100%;}
.menu, .content {display: table-cell;}
.menu {width: 160px;}
.content {width: 500px;}

希望这会有所帮助！

Answer 3

使用此语法

.menu, .content {display: table-cell;}

在IE中DIV宽度没问题，但在Chrome中不起作用

3 个答案: