gpt4 book ai didi

html - 为什么内部 DIV 不可见

转载 作者:太空宇宙 更新时间:2023-11-04 13:03:37 25 4
gpt4 key购买 nike

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

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

最佳答案

.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 或网站。

关于html - 为什么内部 DIV 不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25294908/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com