0

我现在有一个非常奇怪的定位问题。4小时后，我放弃了。我有一个简单的选项卡式应用程序，具有简单的正常布局：

http://mercmobily-bookingdojo.nodejitsu.com/pages/login (test/test) 一旦得到答复，我将确保快照保持在线。

有一个“顶部小部件”，包括顶部的“添加”字段，以及它下面的 dgrid。还有另一个小部件，“窄小部件”，它应该位于 dgrid 的正下方。相反，它与它重叠。

所有小部件的位置要么是相对的，要么是静态的。但是，顶部小部件的高度似乎“不足” - 因此窄小部件放置在dgrid 上。

我检查并检查并检查...有任何提示吗？

默克。

4

2 回答 2

1

你#dgrid_1有一个height: 100%，但它不是唯一的内容。还有2个输入字段。

于 2013-03-28T09:34:01.223 回答
1

除了 Linus 答案之外，要修复它，您可以将绝对定位应用于编辑小部件，这将从流程中提取它，获得所需的结果：

.editing-widget {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

您还需要添加position: relative到#dijit__WidgetBase_0以正确对齐它。

这将使编辑小部件与 中包含的文本重叠#dgrid_1：您可以通过向其父级 ( #dijit__WidgetBase_0) 添加一个 padding-top 来修复，例如padding-top: 36px会成功。

如果您希望将编辑小部件保留在流程中，有一个简单的 css3 声明可以帮助您：

#dgrid_1{
    height: calc(100% - 30px);
}

值得注意的是，目前并非所有浏览器都支持标准的 CSS3 calc() 函数，因此可能需要实现该函数的浏览器特定版本，如下所示：

/* Firefox */
height: -moz-calc(100% - 30px);
/* WebKit */
height: -webkit-calc(100% - 30px);
/* Opera */
height: -o-calc(100% - 30px);
/* Standard */
height: calc(100% - 30px);

（来源：CSS：将宽度/高度设置为百分比减去像素）

于 2013-03-28T09:46:21.640 回答