पैर div के नीचे div छड़ी कैसे करें?

Question

क्या कोई मुझे div#bottom माता-पिता div के नीचे छड़ी बनाने में मदद कर सकता है, इसलिए जब मैं इसके अंदर के बटन पर क्लिक करता हूं तो मुझे ऊपर से div#list से तत्व दिखाने की अनुमति मिल जाएगी?

अधिमानतः मैं जे एस, jQuery, आदि से बचने के लिए चाहते हो जाएगा या कम से कम लेआउट में:

<div class="wrapper"> 
    <div id="top"> 
    <ul> 
     ... 
     ... 
    </ul> 
    </div> 
    <div class="bottom"> 
     <div id="button"> 
     <div id="list"> 
      <ul> 
       <li>elem 1</li> 
       <li>elem 2</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

.wrapper{position:relative;} 
.bottom{position:absolute; bottom:0;} 

संपादित @ centr0 और @TJ Crowder को

धन्यवाद यहां समझने की महत्वपूर्ण बात यह है कि में position:relative में कोई भी तत्व "0" होगा जिसमें position:absolute है। यह .bottom के लिए सीमाओं की घोषणा की तरह है। में position:relative के बिना .bottom उस div

Answer 2

मैं एक समान समस्या पर चला जाता हूं। वैल का समाधान अच्छा है, लेकिन इसमें एक मुद्दा है - आंतरिक div नीचे तक टिकेगा, लेकिन यह पारदर्शी div की ऊंचाई को प्रभावित नहीं करेगा, इसकी "स्थिति: पूर्ण;" (यह पृष्ठ लेआउट प्रवाह से बाहर है)।

.wrapper { 
    position: relative; 
    padding-bottom: 50px; 
} 

.wrapper .bottom { 
    position: absolute; 
    bottom: 0px; 
    height: 50px; 
} 

आप देख सकते हैं, मैं आवरण की .bottom आंग padding-bottom की ऊंचाई सेट:

तो यहाँ किसी को भी होने समान समस्या के लिए मेरे विस्तार समाधान है। नुकसान यह है कि पाद लेख की ऊंचाई दो स्थानों पर है। लेकिन मुझे लगता है कि यह उत्पाद सूची के लिए उदाहरण के लिए एक अच्छा समाधान है, जहां बॉक्स के पाद लेख में निश्चित ऊंचाई है (जैसे मूल्य आदि)।

याद रखें, हर बार जब आप "स्थिति: पूर्ण;" सेट करते हैं, तो तत्व पहले पैरेंट div के खिलाफ पूरी तरह से स्थित होगा, जिसने स्थिति विशेषता सेट की है। या, अंततः, पृष्ठ के खिलाफ ही।