從底部

Question

我在jsfiddle

很簡單的代碼拉出一個div，我希望把它拉出來的底部，有一個固定大小的頁面（1920×1080），我有這個樣的工作，從拉右邊緣，但不知道如何將其移動到底部。

非常感謝，如果你能幫助

HTML

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

腳本

$(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 
}