桌子的高度需要与面板的高度相同

Question

在 IE8 和 Firefox 中我都遇到以下情况：

我有一个高度为 30 像素的面板，在这个面板中我有一个高度为 30 像素的单行表。当它显示在浏览器窗口上时，表格没有填满面板的高度（顶部和底部显示了少量面板。我该如何纠正这个问题，以便表格占据表格的整个高度?

标题栏CSS：

table.masterHeader
{
    background-color:transparent;
    border-collapse:collapse;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    margin-bottom:0;
    padding:0;
    display:block;
    width:820px;
    }

标题面板 CSS：

.HeaderPanel
        {
            background-color:#0079d0;
            height:30px;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:0px;
            margin-top:0px;
            padding:0;
            width:820px;
            }

空格 CSS：

div.Spacer
{
    background-color:transparent;
    height:30px;
    }

主面板 CSS：

.MainPanel
{
    background-color:#6699cc;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    width:820px;
    }

HTML 代码：

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div class="Page">
    <asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server">
        <table class="masterHeader" cellspacing="0" cellpadding="0">
            <tr>
                <td class="Account"></td>
                <td class="Name"></td>
                <td class="Spacer"></td>
                <td class="CompanyName"></td>
                <td class="Logout"></td>
            </tr>
        </table>
    </asp:Panel>
    <asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender>
    <div class="Spacer">&nbsp;</div>
    <asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel">
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
    </asp:Panel>
</div>
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3">
</asp:RoundedCornersExtender>

Answer 1

您是否曾在 Firebug 之类的工具中查看过页面，您可以在其中查看每个 DOM 元素，查看属性（如边距、填充等）。这样您就可以准确地看到额外间距的来源，以及每个元素应用了哪些样式属性。

Answer 2

将单元格间距设置为 0

<table cellspacing="0">
   <tr>
      <td></td>
   </tr>
</table>

Answer 3

您尚未发布代码（HTML 或 CSS）或说明您在哪些浏览器中看到此内容，因此很难确定。一些建议：

• 确保表格的边距为零
• 确保面板没有任何填充
• 确保单元格间距为零
• 确保其他元素没有阻塞表格
• 确保您的 css 样式没有在某处被覆盖

如果您还没有，您应该为 Firefox 安装 Firebug 插件 https://addons.mozilla.org/en-US/firefox/addon/1843/。这使得检查应用的 DOM 和 CSS 样式变得非常容易。

Answer 4

因为 ASP:Panel 将面板分解为 div 标签，并且带有圆角，所以它为面板添加了另一个 1px 边框，该边框是在放置表格之后放置的。为了解决这个问题，表格必须放在一个 div 标签内，并将 div 浮动到面板上方。

Answer 5

我注意到您没有对表格边框做任何事情。这可能是您看到的差距吗？如果您的边框出于任何原因有任何宽度，那么它们可能会显示可能会给您带来问题的效果。

根据我假设您输出的 HTML 最简单的形式，我做了一个快速的 jsfiddle 概念证明。我不熟悉 RoundedCornersExtender 控件，我怀疑它正在修改主 div 的 HTML。

http://jsfiddle.net/tAgp3/1/

您可以看到这种简化的形式有效，但我认为圆角正在尝试通过嵌入额外的带背景的 DIV 来做一些讨厌的技巧来做圆角。这些可能是导致您的额外填充的原因。

我再次询问您是否可以将输出的 实际 html 发布到浏览器，以便我们查看是否是这种情况。