Javascript jQuery滑出选项卡出现溢出问题

我试图在我的页面页脚中实现一个消息选项卡，但是我遇到了一个问题，隐藏的div将页面向下推并创建一个滚动条

.alert-message {
      position: absolute;
      width: 350px;
      height: 270px;
      bottom:-200px;
      padding-top: 45px;
    }
    #clickme2 {
      position: absolute;
      top: 0;
      left: 0;
      height: 65px;
      width: 350px;
      background-color: #971B4C;
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
      cursor: pointer;
    }
    #clickme2 h4{margin: 25px 0px 0px 25px;}
    .alert-message-content {
      float:left;
      background-color: #971B4C;
      width: 350px;
      height: 225px;
      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5);
    }

请看这里的实例

---

有什么想法吗？

我提出了一种不同的方法

添加CSS 修正JQuery 因此，我们不是在移动框，而是在调整其高度的同时将其固定在页面底部

---

演示：

我提出了一种不同的方法

添加CSS 修正JQuery 因此，我们不是在移动框，而是在调整其高度的同时将其固定在页面底部

---

演示：

如果页面太长会发生什么？警报框会在折叠的下面吗？您希望它在折叠的下面吗？如果没有，那么只需将

position:fixed

添加到

。警告消息

OP不是太具体，因此关于position fixed的脚注会使您的答案更全面。@MarcAudet我只是将我的答案（和小提琴）调整为固定位置。对于这种类型的应用程序，固定位置似乎更有意义，回答得好，谢谢！如果页面很长，会发生什么？警报框会在折叠的下面吗？您希望它在折叠的下面吗？如果没有，那么只需将

position:fixed

添加到

。警告消息

OP不是太具体，因此关于position fixed的脚注会使您的答案更全面。@MarcAudet我只是将我的答案（和小提琴）调整为固定位置。对于这种类型的应用程序，固定位置似乎更有意义，回答得好，谢谢！

.alert-message {
    bottom: 0;
    height: 0px;
    overflow: hidden;

}

$("#clickme2").click(function () {
    if ($(this).parent().hasClass("is-popped")) {
        $(this).parent().animate({
            'height': '0px'
        }, {
            queue: false,
            duration: 500
        }).removeClass("is-popped");
    } else {
        $(this).parent().animate({
            'height': '250px'
        }, {
            queue: false,
            duration: 500
        }).addClass("is-popped");
    }
});