asp .net Gridview高度溢出到下一个div

时间:2013-04-03 11:40:15

标签: asp.net html css gridview

我在Gridview标记内有一个div
这个div tasg下面有div个其他内容 如果我没有设置Gridview div高度,那么GV的内容会溢出到GV下面的部分 否则,如果我设置,当记录较少时,GV后会有一个空块。
如何解决这个问题。
请看一下代码......

<div style="height: 100%; width: 785px; margin-top: 0px; overflow: hidden; display: table;">
    <tr>
        <td>
            <asp:GridView ID="dgAccessGrp" runat="server" Style="z-index: 101; left: 13px; position: absolute;
                margin-top: 0px; width: 686px;" AutoGenerateColumns="False" DataKeyNames="access_group_id"
                AllowPaging="True" RowStyle-Height="20px" CellPadding="3" CellSpacing="1" OnRowCancelingEdit="accessGrp_RowCancelingEdit"
                OnRowDeleting="accessGrp_RowDeleting" OnRowEditing="accessGrp_RowEditing" OnRowUpdating="accessGrp_RowUpdating"
                OnPageIndexChanging="dgAccessGrp_PageIndexChanging" OnRowCommand="dgAccessGrp_RowCommand"
                OnRowDataBound="dgAccessGrp_RowDataBound" Font-Bold="False">
                <Columns>
                    <asp:TemplateField HeaderText="SI No">
                        <ItemTemplate>
                            <asp:Label ID="lblAccessGrpID" runat="server" Width="70px" Text="<%# Bind('access_group_id') %>"
                                Visible="false"></asp:Label>
                            <asp:Label ID="lblSIno" runat="server" Width="15px" Text="<%#Container.DataItemIndex+1 %>"></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="access_group_id" Visible="False" />
                    <asp:TemplateField HeaderText="Access group">
                        <ItemTemplate>
                            <asp:LinkButton ID="btnSelect" CommandArgument='<%# Bind("access_group_id") %>' CommandName='SelectAccessGroup'
                                Text='<%# Bind("access_group_name") %>' runat="server" Width="90px"></asp:LinkButton>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtAccessGrp" MaxLength="50" runat="server" Width="90px" Text='<%# Bind("access_group_name") %>'> </asp:TextBox>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Business Unit">
                        <ItemTemplate>
                            <asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_name') %>"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_id') %>" Visible="false"></asp:Label>
                            <asp:Label ID="lblIsActiveBU" runat="server" Width="70px" Text="<%# Bind('bu_active') %>"
                                Visible="false"></asp:Label>
                            <asp:DropDownList ID="dgDrpBU" runat="server" DataValueField="bu_id" DataTextField="bu_name">
                            </asp:DropDownList>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="BU Line">
                        <ItemTemplate>
                            <asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_name') %>"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_id') %>"
                                Visible="false"></asp:Label>
                            <asp:Label ID="lblIsActiveBULine" runat="server" Width="70px" Text="<%# Bind('business_line_active') %>"
                                Visible="false"></asp:Label>
                            <asp:DropDownList ID="dgDrpBULine" runat="server" DataValueField="business_line_id"
                                DataTextField="business_line_name">
                            </asp:DropDownList>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Location">
                        <ItemTemplate>
                            <asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location') %>"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location_id') %>"
                                Visible="false"></asp:Label>
                            <asp:Label ID="lblIsActiveStatus" runat="server" Width="70px" Text="<%# Bind('status') %>"
                                Visible="false"></asp:Label>
                            <asp:DropDownList ID="dgDrpBULocation" runat="server" DataValueField="location_id"
                                DataTextField="location">
                            </asp:DropDownList>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:CommandField ButtonType="Image" CancelImageUrl="~/IMAGEs/cross.gif" EditImageUrl="~/IMAGEs/edit.gif"
                        EditText="" HeaderText="" ShowEditButton="True" UpdateImageUrl="~/IMAGEs/check.gif"
                        UpdateText="">
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                        <HeaderStyle BackColor="#006699" Font-Names="Arial" Font-Size="8pt" ForeColor="White" />
                        <ItemStyle Width="30px" />
                    </asp:CommandField>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
                            <asp:LinkButton ID="btnDelete" CommandArgument='<%# Bind("access_group_id") %>' OnClientClick="return confirm('Are you sure you want to delete this record?');"
                                runat="server" Width="60px" CommandName="Delete">Delete</asp:LinkButton>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" Width="50px" />
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                </Columns>
                <EditRowStyle BackColor="Yellow" />
                <PagerSettings Position="TopAndBottom" />
                <PagerStyle Wrap="True" BackColor="#CCCCCC" HorizontalAlign="Center" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
                SelectCommand="SELECT access_group_name, is_active, access_group_id, last_modified_by, date_stamp, bu_id, business_line_id, location_id FROM tbl_car_access_groups ORDER BY access_group_id DESC">
            </asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
                SelectCommand="Select bu_id,bu_name from  tbl_car_bu ORDER BY bu_name ASC"></asp:SqlDataSource>
        </td>
    </tr>
</div>
<div id="detailArea">
    <br />
    <asp:Label ID="lblError" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="9pt"
        ForeColor="White" Visible="False" BackColor="#E2001A"></asp:Label>
    <table style="height: 347px; width: 915px;">
        <tr>
            <td valign="top" bgcolor="#E1FFE1" style="border: 2px solid #808285">
                <table>
                    <tr>
                        <td class="style26" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            Select User(s) Below :
                        </td>
                    </tr>
                    <tr>
                        <td class="style17" valign="top">
                            <asp:ListBox ID="lbAllUsers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="style27">
                            <asp:Button ID="btnAddToMemberList" runat="server" Text="Add Selected User(s) To 'Group Members' List"
                                BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
                                Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
                                OnClick="btnAddToMemberList_Click" OnClientClick="return AddUserToList()" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style27">
                            <asp:Button ID="btnAddToGAList" runat="server" Text="Add Selected User(s) To 'Group Administrators' List"
                                BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
                                Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
                                OnClick="btnAddToGAList_Click" OnClientClick="return AddUserToList()" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style27">
                            <asp:Button ID="btnAddToGDList" runat="server" Text="Add Selected User(s) To 'Delgated Responsibility' List"
                                BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
                                Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
                                OnClick="btnAddToGDList_Click" OnClientClick="return AddUserToList()" />
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top" bgcolor="#FFEFB0" style="border: 2px solid #808285" class="style31">
                <table>
                    <tr>
                        <td class="style28" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            Group Members :
                        </td>
                    </tr>
                    <tr>
                        <td class="style29" valign="top">
                            <asp:ListBox ID="lbMembers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="style30">
                            <asp:Button ID="btnDelMember" runat="server" Text="Remove Selected Member(s)" BackColor="#215F8B"
                                BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
                                Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelMember_Click"
                                OnClientClick="return DelMembers()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table style="border: 2px solid #808285; width: 913px; background-color: #FFEFB0;">
        <tr>
            <td>
                <table>
                    <tr>
                        <td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            Group Administrators :
                        </td>
                        <td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Delegated Responsibility To :
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:ListBox ID="lbGAs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                        <td>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:ListBox ID="lbGDs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnDelGA" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
                                BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
                                Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGA_Click"
                                OnClientClick="return DelGAs()" />
                        </td>
                        <td>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="btnDelGD" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
                                BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
                                Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGD_Click"
                                OnClientClick="return DelGDs()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold">
                            &nbsp;Name/Email Pairs - Can be pasted into Outlook : (Press Ctrl+A within box to
                            select all) &nbsp;<asp:TextBox ID="tbUserNames" runat="server" Height="140px" TextMode="MultiLine"
                                Width="881px" ReadOnly="True"></asp:TextBox>
                            <br />
                            <br />
                            <br />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <br />
</div>

2 个答案:

答案 0 :(得分:0)

设置包含gridview的div的最小高度 同时将overflowview属性的auto属性设置为auto

您可以参考这些链接
Mysterious min-height behavior
CSS Max Height Property

答案 1 :(得分:0)

您添加到gridview的样式问题 请从您的样式中删除“position:absolute”属性。