html - 为什么内部 DIV 不可见

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

这是它的样子:

如何让滚动条完全显示而不在底部被截断？

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:嗯.. 对不起，我看到他 parent 的高度是固定的。可能不会将你的高度 100% 用于 .pnlMsgScroll 吗？在开发工具中看到，是否有高度100%？或添加 fiddle 或网站。