我的页面高度会导致gridview出现问题

Question

当我的gridview随着数据变大时，即当页面大小增加到10时，gridview会超出主页面区域。图像清楚地描述了我的话。任何人都可以帮我解决这个问题吗？感谢。

    my CSS:

        body
        {
            margin-top: 0px;
            background-image: url('../Images/bg_gradient.png');
            background-repeat: repeat-x;
            background-color: #c6dee8;
        }

        #wrapper
        {
            border: 0px solid green;
            width: 980px;
            margin-right: auto;
            margin-left: auto;
        }


            #main
        {
            width: 978px;
            min-height: 750px;
            max-height: 1000px;
            overflow: auto;
            border: 1px solid black;
        }

        #leftContent
        {
            width: 180px;
            min-height: 750px;
            max-height: 1000px;
            float: left;
            border-right: 1px solid black;
        }
#recordDisplaydiv
{
    padding-top: 50px;
}

My Markup Code:

        <div id="recordDisplaydiv">
                <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                    <ContentTemplate>
                        <asp:GridView ID="gvContract" runat="server" AutoGenerateColumns="False" DataKeyNames="ContractID"
                            CssClass="mGrid" OnPageIndexChanging="gvContract_PageIndexChanging" OnRowCommand="gvContract_RowCommand"
                            EmptyDataText="No Record Exist" PageSize="10" AllowPaging="true">
                            <AlternatingRowStyle CssClass="alt" />
                            <Columns>
                                <asp:BoundField DataField="KeyWinCountNumber" HeaderText="KeyWin Count#" />
                                <asp:BoundField DataField="ItemName" HeaderText="Item" />
                                <asp:BoundField DataField="BrandName" HeaderText="Brand" />
                                <asp:BoundField DataField="CountName" HeaderText="Count" />
                                <asp:BoundField DataField="SellerName" HeaderText="Seller" />
                                <asp:BoundField DataField="BuyerName" HeaderText="Buyer" />
                                <asp:BoundField DataField="ContractNumber" HeaderText="Contract#" />
                                <asp:BoundField DataField="ContractDate" HeaderText="Contract Date" />
                                <asp:BoundField DataField="CountryFromName" HeaderText="Country From" />
                                <asp:BoundField DataField="CountryToName" HeaderText="Country To" />
                                <asp:BoundField DataField="UnitName" HeaderText="Unit Name" />
                                <asp:BoundField DataField="TQty" HeaderText="Total Qty" />
                                <asp:BoundField DataField="Vans" HeaderText="Vans" />
                                <asp:BoundField DataField="UnitPrice" HeaderText="Unit Price" />
                                <asp:BoundField DataField="TAmount" HeaderText="Total Amount" />
                                <asp:TemplateField HeaderText="Delete">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="imgDelete" runat="server" ImageUrl='<%# isDelete_img(Session["isAdmin"].ToString()) %>'
                                            CommandName="DeleteRecord" Enabled='<%# isDelete(Session["isAdmin"].ToString()) %>'
                                            CommandArgument='<%# Eval("ContractID") %>' AlternateText="DeleteRecord" OnClientClick="return confirm_delete();"
                                            Style='<%# delete_style(Session["isAdmin"].ToString()) %>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Edit">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="imgEdit" runat="server" ImageUrl="~/Images/edit.png" CommandName="EditRecord"
                                            CommandArgument='<%# Eval("ContractID") %>' AlternateText="EditRecord" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <PagerStyle CssClass="pgr" />
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
                <div id="ContractbtnExportdiv">
                    <asp:Button ID="btnExport" runat="server" CssClass="btnExportdiv" OnClick="btnExport_Click" />
                </div>
            </div>

Answer 1

将gridview放在可解决问题的可滚动div中

<div style="width:300px;height:250px;overflow:auto;">
  <gridview>
</div>

Answer 2

使用overflow-y:auto;属性来解决问题。

div.classname {
  overflow-y:auto;
} 

Answer 3

尝试删除：

max-height: 1000px;

来自#main和#leftContent divs

Answer 4

将overflow-y用作自动并移除maximum-height两个面板，例如#main和#leftContent，并将高度100％应用为#leftContent的自动。这可能有所帮助。