Asp.net RadMultiPage加载长页时未调整Div height_Asp.net_Css_Telerik

Asp.net RadMultiPage加载长页时未调整Div height

asp.net css telerik

Asp.net RadMultiPage加载长页时未调整Div height,asp.net,css,telerik,Asp.net,Css,Telerik,我的asp.net页面有一个包含Telerik多页控件的div多页。对于那些不熟悉Telerik控件的人来说，可以将其视为一个iFrame，用户点击选项卡控件时，它会加载其他各种页面。我的问题是由multipage控件加载的一个页面很长。当它加载时，浏览器用滚动条将其包装，而不是扩展包含它的div的高度。我不明白为什么会这样。我抑制了控件中的滚动条，并尽力配置css，使div的高度是动态的下面是我的asp.net标记的缩写版本，仅显示与布局相关的元素。有人能告诉我，我需要做什么，使多页div的

我的asp.net页面有一个包含Telerik多页控件的div多页。对于那些不熟悉Telerik控件的人来说，可以将其视为一个iFrame，用户点击选项卡控件时，它会加载其他各种页面。我的问题是由multipage控件加载的一个页面很长。当它加载时，浏览器用滚动条将其包装，而不是扩展包含它的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的选项卡导航系统，动态调整内容容器的高度，以匹配内容所需/创建的高度

这里有一些非正式的清单

我似乎记得我很有用。

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

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

我复制了您的代码并使用了一个多页。单击按钮时，页面会发生更改，正如您看到的那样，div本身会相应地调整以适应更高的控件。这就是你想要做的吗？我不确定这张图片的意图是什么。有没有可能你上传了错误的图像？你描述的场景确实是我想要实现的。那里的图像很难看到，因为你看不到当按下按钮时发生的回发。按下按钮时，DIV将展开以适应右侧的高控制。让我看看我是否能找到代码，这样你就可以将它与你的代码进行比较，并检查差异。

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