Question

在这里有个问题。我正在尝试在页面底部创建一个小的联系信息div。当我点击链接时，它应该向上滑动。 JS在这里没有问题，但我正在努力争取div的位置。

div的高度可变，但必须有一个底部：-x;值，其中x也是可变的。

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

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

HTML：

<div class="box">
    <div class="link">Contact</div>
    <div class="info">
        <ul>
            <li>Name, Middle Name, Surname</li>
            <li>Street, number</li>
            <li>Zip, City</li>
            <li>Variable height div</li>
        </ul>
    </div>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.link{
    height: 1em;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
    background: #268963;
}

.info{
    border: .1em solid #268963;
    padding: 1em;
}

演示：http://jsfiddle.net/ZBd2V/1/

Answer 1

您可以通过设置top样式100%，然后对您想要制作的任何动作应用否定margin-top来执行此操作。在您的情况下，您需要以下内容：

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

Demo

然后，您可以在您拥有的内容和此代码之间切换以切换菜单。唯一的问题是你不能在两者之间转换，因为你要在top:100%;和top:auto;之间以及bottom:0;和bottom:auto;之间进行切换，如果你想要切换它。

Answer 2

只需将.box的'bottom'属性更改为'0'，然后使用.info的高度。我编辑了一下这个小提琴，你可以看看如果你在.box元素中添加/删除类'open'它是如何工作的：

.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;
}

http://jsfiddle.net/ZBd2V/1/

Answer 3

不是100％肯定这是你想要实现的，但是你应该只为你的代码添加一点jQuery，它就像这样工作：

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

    $('.info').slideToggle()

})

Updated fiddle here

使用CSS底层属性的方式可能相反吗？

3 个答案: