绝对定位页脚在相对定位容器中

我知道这个问题的版本已被问了很多很多次。我知道，因为我想我在过去的4个小时里几乎读了他们每一个人。绝对定位页脚在相对定位容器中

我没有见过这个答案。

我遇到的问题是这样的：我有一个模板，但其他功能非常强大，可以非常有限地控制代码。但是，我可以玩CSS。现在有几个项目用在我需要的页眉附近，就在页脚下方。

我有一个包装工作与我有相对位置的工作，并绝对定位包含在脚注下面我需要的项目。

这个作品非常好搭配：

.referencepositionwrapper { 
    position: relative; 
} 
.absolutepositioncontainer { 
    position: absolute; 
    bottom: -144px; 
}

但时才会降低的项目是在高度约136像素。

这是蹭。我需要在页脚下移动的内容是动态的。有时它是136px高，有时是36px。有时候它高300px。

目前，绝对定位的物品引用了包装和容器的底部，所以当容器高度发生变化时，事情变得不可靠。

有没有办法使用包装的底部和容器的顶部，因此两个元素之间没有大量的死区或重叠？

非常感谢你，任何帮助将不胜感激。

请求的上下文。

在我放弃了绝对一流的例子：

bottom:-144px;

产生相对的底部和绝对

的底部这是确定的页脚时之间144px距离身高只有136px。这两个元素之间有一个合理的空间，大约8px。但不同页面的高度绝对不同。

因此，当页脚包含更多数据时，说足以使绝对300px高，有156px的重叠。当数据较少时，说足够高的绝对值为36px，则存在108px的“死区”。

我想找到一种方法来定义的距离，说36px，相对的底部和绝对的顶部之间。

这样，无论绝对多少额外的数据，相对和绝对之间只有36px。

感谢您的评论。希望这可以帮助。让我知道你是否需要其他信息。

来源

2012-02-03 ZombieBunnies

你可以提供一个情境？我真的不明白你在问什么...... – elclanrs 2012-02-03 04:35:47

在这种情况下，jsfiddle会很有用。 – 2012-02-03 08:21:10

试试这个：

.referencepositionwrapper { 
    position: relative; 
} 

.absolutepositioncontainer { 
    position: absolute; 
    top: 100%; 
    margin-top: 36px; /* or your custom distance between the two */ 
}

来源

2012-02-03 18:17:54 Artyom

绝对定位页脚在相对定位容器中

回答

相关问题