Question

我正在构建一个将从屏幕底部滑出的东西。我不知道它的高度。

如果我知道我能做的高度

position: fixed;
bottom: -200px //height of object

我使用css-animations将其滑出，它将滑动到bottom: 0因此我无法使用top: 100%;来隐藏对象。还有其他选择吗？

Answer 1

也许您需要一个父节点

parent:{
    position: fixed;
    top: 100%;
}
child {

}

然后使用margin-top从0到-100％

Answer 2

这是我提出的解决方案。使用translateY移动它。

<强> CSS

.slidingthing {
    position: fixed;
    top: 100%;

    /* or margin-top in your case?
    margin-top: 100% */

    height: 100px; // or whatever
    width: 100px; // or whatever
    transform: translateY(-100%); // add other browser vendor prefixes
}

FIDDLE： http://jsfiddle.net/vKW65/4/

Answer 3

您可以使用更大的数字，例如bottom: -2000px;您也可以添加overflow:hidden以确保元素移出视图后不会显示滚动条，前提是您不想在页面上使用它。

是否可以在屏幕边框下方修复未知高度的元素？

3 个答案: