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

标签 asp.net html css gridview

我在 div 标签内有一个 Gridview
并且在这个div标签下面有一个div包含其他内容。
如果我不设置 Gridview div 高度,则 GV 的内容会溢出到 GV 下方的部分。
否则如果我设置,当记录较少时,GV 后面会有一个空 block 。
我如何解决这个问题。
请看代码...

<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>

最佳答案

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

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

关于asp.net - asp .net Gridview高度溢出到下一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15786362/

相关文章:

c# - 以下缓存项会在 15 分钟后过期吗?

asp.net - linq 求和与分组

javascript - 使用通用处理程序异步上传文件

css - 浏览器的可比性?

Jquery 幻灯片可以在本地运行,但不能在线运行

c# - 什么是 HTTP Referer header ?

javascript - 将多个值加载到文本区域

html - 修复了 HTML 表格中带有 CSS 的行标题

jquery - 带有 CSS 布局模板模块的粘性页脚?

css - 在 CSS 文件中查找和修改数值的工具/脚本?