RadMultiPageが長いページを読み込んだときにdivの高さが調整されない

My asp.netページにTelerik MultiPageコントロールを含むdiv（#multipage）があります。 Telerikのコントロールに精通していない人には、タブコントロールのユーザーのクリックに応じてさまざまな他のページを読み込むiFrameと考えることができます。私の問題は、複数ページのコントロールによって読み込まれたページの1つが長いページであることです。そして、ブラウザがロードされると、スクロールバーを含むdivの高さを拡大するのではなく、スクロールバーでブラウザをラップします。なぜこれが起こっているのか分かりません。私はコントロール内のスクロールバーを抑制し、divの高さが動的であるように自分のCSSを設定するように最善を尽くしました。RadMultiPageが長いページを読み込んだときに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>

出典

2011-09-21 hughesdan

http://i.imgur.com/O7tPq.pngコードをコピーしてRadMultiPageを使用しました。ボタンがクリックされると、ページが変更され、表示されるように、div自体がより高いコントロールに合わせて調整されます。これはあなたがやろうとしていることですか？ – KreepN

私はこのイメージが何を描写しようとしているのか分かりません。間違った画像をアップロードした可能性はありますか？あなたが説明するシナリオは、私が達成しようとしているものです。 – hughesdan

ボタンを押したときに起こるポストバックを見ることができないため、画像が見えにくいです。ボタンが押されると、そこのDIVが拡大して、その高いコントロールを右側に合わせます。私がコードに悩まされているかどうかを見てみましょう。そうすれば、あなたとあなたのコードを比較し、違いを確認することができます。 – KreepN

ダイナミックフレームの高さを作るためにCSSを介した方法はありません。

私はASPやRadMultiPageに慣れていませんが、1つの解決策は、コンテンツコンテナの高さをコンテンツの必要な高さに合わせて動的に調整するjavascript + cssベースのタブナビゲーションシステムを使用することです。

hereという非公式のリストがあります。

this oneは便利であると思います。

出典

2011-09-21 22:09:17 Ben

は先に行くと、新鮮な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; 
}

は、それを実行し、それが動作するかどうかを教えてください。私が思い出したように、あなたのコードに残しておいたいくつかのタグを閉じる必要がありました。

出典

2011-09-23 15:43:25 KreepN

RadMultiPageが長いページを読み込んだときにdivの高さが調整されない

答えて

関連する問題