我的 asp.net 页面有一个包含 Telerik MultiPage 控件的 div (#multipage)。对于那些不熟悉 Telerik 控件的人,可以将其视为加载各种其他页面以响应用户在选项卡控件上的单击的 iFrame。我的问题是多页控件加载的其中一个页面很长。当它加载时,浏览器用滚动条包裹它,而不是扩展包含它的 div 的高度。我不明白为什么会这样。我抑制了控件中的滚动条,并尽力配置我的 css,使 div 的高度是动态的。
下面是我的 asp.net 标记的简化版本,仅显示与布局相关的那些元素。有人可以告诉我需要做什么才能使多页 div 的高度动态化吗?
<head runat="server">
<style type="text/css">
* {
margin: 0;
}
html, body
{
height: auto;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
background-color: #144e77;
color: #fff;
font-family: DejaVuSansBook, Sans-Serif;
}
#multipage
{
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body style="background:url(AuthImages/bg.jpg) repeat; margin:0px 0px 0px 0px">
<form id="form1" runat="server">
<div class="wrapper">
<div id="header_container">
<div id="header" style="width:100%; height:75px;">
<div id="logo" style="float:left"></div>
<div id="welcome" style="float:right; margin-right: 5px; margin-top:5px;">
</div>
</div>
</div>
<div id="tabs" style="width:100%; height:25px; border-bottom: 2px solid #144e77">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
SelectedIndex="0" Width="100%" MultiPageID="RadMultiPage1">
<Tabs>
<!--tabs are here-->
</Tabs>
</telerik:RadTabStrip>
</div>
<div id="multipage">
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" ScrollBars="None">
<!--RadPageViews are here-->
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</form>
最佳答案
无法通过 CSS 生成动态帧高度。
我不熟悉 ASP 和 RadMultiPage,但是一种解决方案是使用基于 javascript+css 的选项卡导航系统,动态调整内容容器的高度以匹配内容所需/创建的高度。
有一些非正式的列表 here .
我好像记得this one因为有用。
关于asp.net - 当 RadMultiPage 加载长页面时 Div 高度未调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7506584/