HTML 行自动调整大小以适应窗口

Question

我有一个 HTML 表格（黑色），它填充了一个窗口（蓝色）。该表包含两行。 当我调整窗口大小时，第 1 行（红色）高度必须是可变的，第 2 行（绿色）高度必须是恒定的。

第 1 行内容是动态生成的（标签条和树视图 - 都是 Telerik）。

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

Answer 1

简单问题的简单答案。设置第一行的相对高度（%）和第二行的固定高度（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"; }

见fiddle。

Answer 2

将此添加到您希望自动调整大小的任何行，甚至高度也可以给它 % 而不是 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>