Question

我在DIV中有一个GridView我想要一个滚动条，如果它超出了高度。我可以看到滚动条，但它超出了DIV的高度。

这是我的代码：

<div class="tab_container2"> 
    <div id="adminSubTab1" class="tab_content2" style="border: 1px solid yellow;">
        <div style="text-align: right; padding-bottom: 8px;">
            <asp:HyperLink ID="hlCreateCL" ClientIDMode="Static" CssClass="btnExport" runat="server" NavigateUrl="JavaScript:void(0);" Target="_blank">Create a Message</asp:HyperLink>
        </div>
        <asp:Panel ID="pnlMsg" CssClass="pnlMsg" ClientIDMode="Static" runat="server" BorderWidth="1" BorderColor="#cc00cc">
            <asp:Panel ID="pnlMsgScroll" CssClass="pnlMsgScroll" ClientIDMode="Static" runat="server" BorderColor="YellowGreen" BorderWidth="1">
                <asp:UpdatePanel runat="server" ID="upDispMsg" UpdateMode="Conditional" ClientIDMode="Static">
                    <ContentTemplate>
                        <asp:GridView ID="gvDispMsg" ClientIDMode="Static" ShowHeaderWhenEmpty="false" AlternatingRowStyle-BackColor="#EBE9E9" AutoGenerateColumns="false" EmptyDataText="There is no data to display" runat="server" AllowPaging="false" AllowSorting="true" OnRowCommand="gvDispMsg_RowCommand" OnRowDataBound="gvDispMsg_RowDataBound">
                            <Columns>
                                <asp:TemplateField HeaderText="Delete">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="btnDelete" ImageUrl="~/theImages/delete.png" CssClass="delButton" runat="server" CommandName="DeleteMsg" ToolTip="Delete This Message" CommandArgument='<%# Bind("ID") %>' />
                                    </ItemTemplate>                
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="ID" HeaderStyle-Width="12%" DataField="ID" />
                                <asp:BoundField HeaderText="Date" HeaderStyle-Width="13%" DataField="Created" />
                                <asp:BoundField HeaderText="Message" HeaderStyle-Width="45%" DataField="Message" />
                                <asp:TemplateField HeaderText="Active/Inactive">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="cbStatus" runat="server" Checked='<%# Eval("Active").ToString().Equals("True") ?  true : false %>' AutoPostBack="true" OnCheckedChanged="cbStatus_CheckChanged" />
                                        <asp:HiddenField ID="hfCheck" Value='<%# Eval("Active").ToString() %>' runat="server" />
                                    </ItemTemplate>                
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="Created By" HeaderStyle-Width="20%" DataField="CreatedBy" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </asp:Panel>
        </asp:Panel>
    </div>
    <div id="adminSubTab2" class="tab_content2">
        <p style="text-align: center;"><asp:HyperLink ID="hlChecklist" ClientIDMode="Static" CssClass="genChecklist" runat="server" NavigateUrl="http://myappweb//w2" Target="_blank">Click Here to Generate a Checklist</asp:HyperLink></p>
    </div>
    <div id="adminSubTab3" class="tab_content2">
        <p>THIS IS MAINTENANCE CONTENTS</p>
    </div>
</div> <!-- .tab_container -->

这是CSS：

.tab_container2 {
    border: 1px solid #999999;
    border-top: none;
    clear: both;
    float: left; 
    width: 99%;
    background: #FFFFFF;
}
.tab_content2 {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.2em;
    display: none;
}
.pnlMsg {
    height: 520px;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}
.pnlMsgScroll {
    height: 100%;
    width: 100%;
    display: inline-block;
    overflow-y: scroll;
    overflow: scroll;
    position: relative;

    /* IE */
    scrollbar-base-color: #A0A0A0;
    scrollbar-base-color: #A0A0A0;
    scrollbar-3dlight-color: #A0A0A0;
    scrollbar-highlight-color: #A0A0A0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-shadow-color: #A0A0A0;
    scrollbar-darkshadow-color: #A0A0A0;
}

这是它的样子：

enter image description here

如何在不切断底部的情况下让滚动条完全显示？

Answer 1

.pnlMsgScroll {
height: 100%;
width: 100%;
display: inline-block;
overflow-y: scroll;
overflow: scroll;
position: relative;

/* IE */
scrollbar-base-color: #A0A0A0;
scrollbar-base-color: #A0A0A0;
scrollbar-3dlight-color: #A0A0A0;
scrollbar-highlight-color: #A0A0A0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: #FFFFFF;
scrollbar-shadow-color: #A0A0A0;
scrollbar-darkshadow-color: #A0A0A0;
}

如果您从.pnlMsgScroll中移除100％的高度，并且添加固定高度，则您的代码可以正常工作。溢出：滚动不使用100％。或者为他的父母增加固定的身高。

upd：嗯..对不起，我看到他的父母有固定的身高。可能是你的身高100％到.pnlMsgScroll？在开发工具中看到，高度是100％吗？或者添加小提琴或网站。

为什么内部DIV不在视野范围内

1 个答案: