1

ページ フッターにメッセージ タブを実装しようとしていますが、非表示の 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/

何か案は？

4

1 に答える 1

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/

于 2013-08-23T14:35:25.593 に答える