ASP：表格按钮变得不可点击：按钮嵌套在表格内，在 div 内答案

【问题标题】：ASP: Table buttons become unclickable: Buttons nested inside a table, inside a divASP：表格按钮变得不可点击：按钮嵌套在表格内，在 div 内
【发布时间】：2016-09-03 06:16:54
【问题描述】：

所以，我有一个非常简单的 ASP.Net 页面。它看起来像这样：

<head runat="server">
<style>
   *{ padding:0; margin:0; }
   table{ height:100%; width:100%; }
   input { background-color:black; width:100%; height:100%; }
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
    <table>
        <tr>
            <td><asp:Button ID="Button00" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button10" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button20" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button30" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button40" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button50" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button60" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button70" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button80" runat="server"  OnClick="Button_Click" /></td>
        </tr>
        <tr>
            <td><asp:Button ID="Button01" runat="server"  OnClick="Button_Click" /></td>
            <td><asp:Button ID="Button11" runat="server"  OnClick="Button_Click" /></td>
  ...

接下来还有 8 个表格行，看起来都和第一个一样。 Button_Click 执行了一个我已经测试过的操作，并且一切正常。但是我想让按钮网格填充视口的高度，所以当我添加时：

   div{ position:fixed;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;}

它修复了我的格式，但它使我的所有按钮都无法点击（但它们仍然显示）。我环顾四周，但找不到类似的东西；我正在寻找纯 HTML 或 ASP.Net 答案，因为此页面用于教学目的。我相信我已将问题缩小到 div 位置标签，如两张图片所示，唯一的区别是存在

position:fixed;

【问题讨论】：

代码示例中显示的div后面还有其他元素吗？
没有。只有结束标签。

标签： html css asp.net

【解决方案1】：

由于您定义了应用于页面中所有 div 的样式，因此表格容器之后的任何其他 div 都会覆盖它并阻止点击。您可以通过设置 div 的id 来确保样式仅适用于表格容器：

<div id='div1'>
    <table>
        <tr>
        ...
        </tr>
    ...
    </table>
</div>

并通过设置样式以应用于特定的 div：

#div1
{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

【讨论】：