0

ウィンドウ（青）を埋めるHTMLテーブル（黒）があります。テーブルには 2 つの行が含まれています。ウィンドウのサイズを変更するとき、行 1 (赤) の高さは可変で、行 2 (緑) の高さは一定でなければなりません。

行 1 のコンテンツは動的に生成されます (タブ ストリップとツリー ビュー - どちらも Telerik)。

行 2 には 2 つの列が含まれます。

つまり、ウィンドウのサイズが変更されたときに行 1 自体を自動サイズにする方法は?

ここに画像の説明を入力

これまでに行ったことは次のとおりです。

<table style="width:100%;">
    <tr style="height:100%;vertical-align:top;overflow:auto">
        <td colspan="2">
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Width="100%" Height="100%">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Tab1" Selected="True">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Tab2">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" SelectedIndex="0" Height="100%">
                <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" style="border: 1px solid grey">
                    <telerik:RadTreeView ID="RadTreeView1" runat="server"></telerik:RadTreeView>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server" Height="100%" style="border: 1px solid grey">
                    <telerik:RadTreeView ID="RadTreeView2" runat="server"></telerik:RadTreeView>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </td>
    </tr>
    <tr>
        <td style="font: normal 12px arial; text-align: left;">
            <asp:CheckBox ID="CheckBox1" runat="server" Text="Do something when checked." AutoPostBack="true" />
        </td>
        <td style="text-align: right">
            <telerik:RadButton ID="CancelButton" runat="server" Text="Cancel" OnClientClicked="windowClose" UseSubmitBehavior="false">
            </telerik:RadButton>
        </td>
    </tr>
</table>
4

2 に答える 2

1

シンプルな質問に対するシンプルな答え。1 行目に相対高さ (%) を設定し、2 行目に固定高さ (px) を設定してください!

<table style="width:100%;">
    <tr style="height:100%;vertical-align:top;overflow:auto">
          ....
    </tr>
    <tr style="height:100px;">
          ....
    </tr>
</table>

100px行 2 に必要な高さに調整します。

また、javascript と onload メソッドを使用して、テーブルの高さをウィンドウの高さに設定します。

JavaScript は次のようになります。

document.onload  = new function(){

    var theTable = document.getElementById("myTable"); theTable.style.height = (document.height)+"px"; }

フィドルを参照してください。

于 2013-02-22T14:51:10.107 に答える
0

自動サイズ設定する行にこれを追加します。高さでも、PXではなく％を指定できます。

<tr style="width:10%;height:20px;">
    <td style="font: normal 12px arial; text-align: left;">
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Do something when checked." AutoPostBack="true" />
    </td>
    <td style="text-align: right">
        <telerik:RadButton ID="CancelButton" runat="server" Text="Cancel" OnClientClicked="windowClose" UseSubmitBehavior="false">
        </telerik:RadButton>
    </td>
</tr>
于 2013-02-22T12:09:48.593 に答える