Question

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

Answer 1

无法通过CSS制作动态帧高。

我不熟悉ASP或RadMultiPage，但是一种解决方案是使用基于javascript + css的选项卡导航系统，该系统动态调整内容容器的高度以匹配内容所需/创建的高度。

有一些here的非正式列表。

我似乎记得this one有用。

Answer 2

继续创建一个新的Telerik网站，并将以下代码复制到现有的 html / html 部分。

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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;
        background-color: Gray;
        width: 100%;
    }
    </style>
</head>
<body>
<form id="form1" runat="server">


    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>


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


</div>

<div id="multipage" style="width: 100%">
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" ScrollBars="None" 
        SelectedIndex="0" Width="742px">
    <!--RadPageViews are here-->
        <telerik:RadPageView ID="RadPageView1" runat="server">
            <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server">
            <asp:TextBox ID="TextBox1" runat="server" Height="461px"></asp:TextBox>
        </telerik:RadPageView>
    </telerik:RadMultiPage>   
</div>

<div class="push">
</div>

</div>

<div class="footer">
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</div>

</form>
</body>
</html>

然后将其添加到后面的代码中：

protected void Button1_Click(object sender, EventArgs e)
{
    RadMultiPage1.SelectedIndex = 1;
}

运行它并告诉我它是否有效。我记得我必须关闭你在代码中打开的几个标签。

RadMultiPage加载长页面时不调整Div高度

2 个答案: