Вытащите DIV с нижней

Question

у меня есть этот код на jsfiddle

Довольно просто, я хочу, чтобы вытащить его из нижней части, на странице фиксированного размера (1920х1080), у меня есть этот пример работает, чтобы вытащить из правый край, но не уверен, как переместить его на дно.

Большое спасибо, если вы можете помочь

HTML

<div id="slideout"> 
    <div id="slidecontent"> 
     Yar, there be dragonns herre! 
    </div> 
    <div id="clickme"> 
    </div> 
</div> 

Script

$(function() { 
    $("#clickme").toggle(function() { 
     $(this).parent().animate({right:'0px'}, {queue: false, duration: 500}); 
    }, function() { 
     $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}); 
    }); 
}); 

Стиль:

body { 
    overflow-x: hidden; 
} 
#slideout { 
    background: #666; 
    position: absolute; 
    width: 280px; 
    height: 80px; 
    top: 45%; 
    right:-280px; 
    padding-left: 20px 
} 

#clickme { 
    position: absolute; 
    top: 0; left: 0; 
    height: 20px; 
    width: 20px; 
    background: #ff0000; 
} 

#slidecontent { 
    float:left; 
} 

Answer 1

Посмотрите на следующий jsFiddle ..

В основном я скопировал и вставил свой код и манипулировать с помощью bottom позиционирования. таким образом вы сможете увидеть различия между ними .. как в CSS, так и в JS. это, по сути, та же логика, что и код, который вы опубликовали.

Обратите внимание, что корпус теперь имеет overflow:hidden; вместо overflow-x:hidden;

Answer 2

Чтобы переместить его на дно, просто сделать небольшой сменить на свой CSS.

#slideout { 
    background: #666; 
    position: absolute; 
    width: 280px; 
    height: 80px; 
    bottom: 50px; 
    right:-280px; 
    padding-left: 20px 
}