Question

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

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

第2行包含两列。

换句话说，当窗口调整大小时，如何使行1自动调整大小？

enter image description here

到目前为止，我所做的一切都是：

<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，例如

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

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

请参阅fiddle。

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

2 个答案: