javascript - jQuery滑出选项卡的溢出问题

Question

我正在尝试在我的页脚中实现一个消息选项卡，但我遇到了隐藏 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);
    }

在此处查看实时示例http://jsfiddle.net/Zu9Sk/

有任何想法吗？

Answer 1

我提出了一个不同的方法......

添加了 CSS

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

}

修改后的 JQuery

$("#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");
    }
});

因此，我们不是在四处移动盒子，而是调整它的高度，同时将它固定在页面的底部。

演示：http: //jsfiddle.net/gvee/Zu9Sk/3/