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

Setting negative bottom property in css extends bottom of the page

本文关键字：底部 扩展 属性 设置 css      更新时间：2023-09-26

我试图在页面底部隐藏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/

您可以将元素的位置设置为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的布局效果更好。

转换完成后，您应该制作将显示设置为none的javascript脚本，并将body溢出设置为hidden。

相关文章：