Question

我试图在页面底部隐藏部分html元素，然后通过CSS3过渡单击向上滑动来显示整个事物。

通常，应该发生的是在页面下方延伸的元素部分只是隐藏但是，正在发生的是页面正在被扩展以显示元素的一部分。

我该如何解决这个问题？

继承我的代码：

HTML：

<div class="closed" id="slidePanel">
    <div id="slidePanel-tab">
            Stuff
    </div>
    <div id="slidePanel-contents">
        <ol>
            <li>stuff</li>
            <li>stuff</li>
        </ol>
    </div>
</div>

CSS：

#slidePanel {
    background-color: #e9e9e9;
    position: absolute;
    bottom: 0;
    left: calc(50% - 66px);   
    z-index: 2;
    min-width: 10%;
    min-height: 20%;
    border: 2px solid rgba(0, 0, 0, .05);

    -webkit-transition: bottom 0.5s ease-in-out;
    transition: bottom 0.5s ease-in-out;
}

#slidePanel.closed {
    bottom: calc(-20% + 20px);

    -webkit-transition: bottom 0.5s ease-in-out;
    transition: bottom 0.5s ease-in-out;
}

#slidePanel-tab {
    background-color: #d0d0d0;
}

$("#slidePanel-tab").click(function (evt) {
    $("#slidePanel").toggleClass("closed");

    evt.preventDefault();
});

以下是一个例子： https://jsfiddle.net/sd306pyr/

Answer 1

您可以将元素的位置设置为fixed：

#slidePanel {
background-color: #e9e9e9;
position: fixed;
bottom: 0;
left: calc(50% - 66px);   
z-index: 2;
min-width: 10%;/*30%; */
min-height: 20%;
border: 2px solid rgba(0, 0, 0, .05); 
-webkit-transition: bottom 0.5s ease-in-out;
transition: bottom 0.5s ease-in-out;
}

请参阅小提琴：https://jsfiddle.net/sd306pyr/2/

您还可以按照问题的评论中的指示，将元素容器的overflow设置为hidden。无论你的DOM整体布局如何都能更好。

Answer 2

转换完成后，您应该制作将显示设置为无的javascript脚本，并将 body overflow设置为隐藏。

在css中设置负底部属性会扩展到页面底部

2 个答案: