html - div中的2个元素溢出

Question

我的 div 中有一个外部 jsp 页面(一个菜单)和一个 DOJO 表。当我尝试申请时

overflow:auto;

on the div, I am seeing 2 scroll bars. One for the table and the other for the menu. How do I make the menu and the table scroll for a single scroll bar?

    <div id="table">
        <jsp:include page="searchgroup.jsp"></jsp:include>
        <div id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid" query="{ name: '*' }"
                    data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
                           description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10">
        </div>
    </div> 

这是我的CSS

    #grid1{
        height: 85%; 
        width: 104%;
        overflow-x:auto;
    }
    #table{
        height:90%;
        width:104%;
            overflow-x:auto;   
    }

        <script>
          dojo.require("dojox.grid.EnhancedGrid");
          dojo.require("dojox.grid.enhanced.plugins.Pagination");
          dojo.require("dojo.data.ItemFileWriteStore");
          dojo.require("dojox.grid.enhanced.plugins.Filter");
          dojo.require("dojox.data.QueryReadStore");
          dojo.require("dojo.parser"); // scan page for widgets and instantiate them
          var gridLayout = [ 
          {
             name : "S. No.",
             classes : "title",
             width : "70%",
             get : siFormatter,
             filterable : false
          }, {
             name : "Site Id",
             classes : "title",
             field : "siteId",
             width : "70%"
         }, {
             name : "IP/Phone No.",
             classes : "title",
             field : "devType",
             width : "120%"
         }, {
            name : 'Site Name',
            classes : "title",
            field : "name",
            fields : [ 'company', 'name' ],
             formatter : formatLink,
             width : "110%"
         }
    </script>

Answer 1

因为你对它们都应用了overflow: auto 你应该在其中一个而不是两个上使用它