我正在尝试在页面页脚中实现一个消息选项卡,但是我遇到了隐藏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/
有什么想法吗?
答案 0 :(得分:1)
我提出了一种不同的方法......
.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");
}
});
因此,我们不是移动盒子而是调整它的高度,同时将它固定到页面的底部。