Html 使用CSS底部属性的相反方式，可能吗？

这里有个问题。我正试着在页面底部做一个小小的联系信息div。当我点击一个链接时，它应该向上滑动。JS在这里是没有问题的，但我正在与div的位置斗争

div具有可变高度，但必须具有底部：-x；值，其中x也是变量

如果底部：；属性将以相反的方式工作，因此值0将使div的顶部粘到底部，这不会是一个问题

难以解释。也许只是看看JSFIDLE中的代码

HTML:

---

演示：

不是100%确定这是您想要实现的，但是您应该只在代码中添加一点jQuery，它可以像这样工作：

$('.info').hide()
$('.link').click(function(){

    $('.info').slideToggle()

})

---

您可以通过设置

top

样式的

100%

，然后为您想要进行的任何移动备份应用负

边距top

来完成此操作。在您的情况下，您需要以下内容：

.box{
    position:fixed;
    top: 100%;
    right: 2em;
    padding-top: 3em;
}

---

然后你可以在你所拥有的和这个代码之间切换来切换菜单。唯一的问题是你不能在两者之间转换，因为你将在

top:100%之间交替和
顶部：自动，和
底部：0和
底部：自动，如果您想切换它。
只需将.box的“bottom”属性更改为“0”，并使用.info的高度即可。
我对fiddle进行了一些编辑，如果将类“open”添加/删除到.box元素，您可以看到它是如何工作的：

.box{
    position:fixed;
    bottom: 0;
    right: 2em;
    padding-top: 3em;
}

.info{
    border: none;
    padding: 0;
    height:0px;
}
.box.open .info {
    height:auto;
    border: .1em solid #268963;
    padding: 1em;
}

有什么问题？设置
bottom:0
将把元素的底部放在父元素的底部。如果是oposite，你会有问题，因为元素会在父元素之外，在本例中是在窗口之外。我希望它在窗口之外，但得到了我的答案！）Pff为什么我没想到这个。。谢谢我要在整个高度上使用它，然后它就可以工作了，tx@你到底想达到什么目的？绿色标志必须伸出底部，然后单击时整个框应向上/向下滑动？为什么你需要把盒子的顶部放在页面底部？只是为了隐藏它？你不能用jQuery.hide（）来做吗？
.box{
    position:fixed;
    top: 100%;
    right: 2em;
    padding-top: 3em;
}

.box{
    position:fixed;
    bottom: 0;
    right: 2em;
    padding-top: 3em;
}

.info{
    border: none;
    padding: 0;
    height:0px;
}
.box.open .info {
    height:auto;
    border: .1em solid #268963;
    padding: 1em;
}