Div 标签 JQuery UI

Question

我正在开发一个小部件控件。小部件动态加载到小部件容器中。小部件容器包含一个容纳小部件的 div，这称为小部件区域。小部件容器可使用 JQuery UI 进行拖动和调整大小。

我遇到的问题是小部件区域的下边距似乎不起作用，或者也许我误解了边距的工作原理。左上角和右边距工作正常，我将它们设置为 20px，因此小部件区域距离小部件容器的左上角和右侧为 20px。底部边距也是 20 像素，但小部件区域底部与小部件容器底部之间的距离远大于 20 像素。我在 Firefox 中尝试过，也出现了同样的问题。

当我调整小部件容器的大小时，小部件区域的左侧也会由于边距而调整大小，但是小部件的底部根本不会调整大小，因为底部边距似乎不起作用。

这是我的小部件容器和 css。

<asp:Panel ID="Panel1" CssClass="widgetcontainer" runat="server" Height="500px" BorderStyle="Solid" BorderWidth="1px" Width="485px" BackColor="White">
    <asp:Panel ID="Panel2" CssClass="widgetcontainerheader" runat="server">
        <asp:Label ID="Label2" runat="server" Text="Gadget header"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="WidgetBodyPanel" CssClass="widgetarea" runat="Server"    BorderStyle="Solid">
        <p>
            some text
        </p>
    </asp:Panel>

</asp:Panel>

div.widgetcontainerheader
{
    background-color:#CCFF99;

    border-bottom-style:solid;
    border-bottom-width:thin;
    border-bottom-color:#D2D2D2;

    position: relative;
    width:100%;
    height:20px;
}

.widgetarea
{
    position:relative;

    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    margin-bottom:20px;

}

有人可以告诉我为什么底部边距不起作用吗？

谢谢

Answer 1

您将 widgetcontainer 的高度设置为 500px。

我想说 widgetarea 确实有 20px 的 margin-bottom，但它看起来比这个更大，因为 widget 区域没有高度。也许设置高度：100%。

.widgetarea
{
  margin: 20px;
  height: 100%;
}

顺便说一句，非常值得安装 http://getfirebug.com/ 来调试这些烦人的用户界面问题。