为什么 100% 不适用于表格单元内的面板？答案

【问题标题】：Why 100% doesn't work with panels inside tablecells?为什么 100% 不适用于表格单元内的面板？
【发布时间】：2011-12-26 04:24:59
【问题描述】：

我在表格单元中放置了一个面板并将宽度和高度属性设置为 100% 以便面板占用表格单元的 100% 空间，但是当我这样做时面板消失了. 只有当我将面板宽度和高度属性设置为 100px 时，才会显示它。那么如何将面板设置为始终占据它所在的表格单元的 100%？

在此示例中，面板不显示：

<asp:Table runat="server" ID="mainTable" Width="100%" Height="100%" BorderColor="Red" BorderWidth="20px" BorderStyle="Solid">
    <asp:TableRow runat="server" ID="mainRow" Width="100%" Height="100%" BorderColor="Purple" BorderWidth="20px" BorderStyle="Solid">
        <asp:TableCell runat="server" ID="maincell" Width="30%" Height="100%" BorderColor="AliceBlue" BorderWidth="20px" BorderStyle="Solid">
            <asp:Panel runat="server" ID="mainpanel" Width="100%" Height="100%" BackColor="Gainsboro"></asp:Panel>
        </asp:TableCell>
        <asp:TableCell runat="server" ID="TableCell1" Width="30%" Height="100%" BorderColor="AliceBlue" BorderWidth="20px" BorderStyle="Solid">
            <asp:Panel runat="server" ID="Panel1" Width="100%" Height="100%" BackColor="Gainsboro"></asp:Panel>
        </asp:TableCell>
        <asp:TableCell runat="server" ID="TableCell2" Width="30%" Height="100%" BorderColor="AliceBlue" BorderWidth="20px" BorderStyle="Solid">
            <asp:Panel runat="server" ID="Panel2" Width="100%" Height="100%" BackColor="Gainsboro"></asp:Panel>
        </asp:TableCell>
    </asp:TableRow>
</asp:table>

我在单元格中放置了一个面板，因为我想稍后在其中放置控件。

【问题讨论】：

标签： asp.net panel tablecell

【解决方案1】：

您需要指定单位类型，因为它默认为像素（显然）。我不知道如何在标记中指定它，所以真的帮不上忙。

这个问题有类似的问题：aspnet table - specify TableCell width?

他们建议改用 CSS。

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.width.aspx#Y0

webControl.width = Unit.Percentage(100) 应该可以工作，再次不确定你会把它放在哪里，因为我不做 ASP。

【讨论】：

【解决方案2】：

我认为这是由于浏览器中的缺陷/优化造成的。网页呈现为正确的 html，但是当浏览器呈现页面时，它将跳过/删除空 div。因此，如果您将某种内容插入到其中一个 div 中，例如浏览器将正确呈现 div。

【讨论】：

【解决方案3】：

将style="empty-cells: show" 放在 TableCell 上，IE7 和 FF 可以正确呈现它，但在 IE9 中它确实占用空间但不占用背景颜色

        <asp:TableCell runat="server" ID="maincell" Width="30%" Height="100%" BorderColor="AliceBlue"
            BorderWidth="20px" BorderStyle="Solid" style="empty-cells: show">
            <asp:Panel runat="server" ID="mainpanel" Width="100%" Height="100%" BackColor="Gainsboro">
            </asp:Panel>
        </asp:TableCell>

在 css 中玩耍并为每个浏览器设置正确的样式。就是这么累。：/

【讨论】：