Come rendere il bastone div in fondo al div del genitore?

Question

Qualcuno potrebbe aiutarmi a creare lo stick div#bottom nella parte inferiore del genitore div, quindi quando clicco sul pulsante al suo interno mi consentirà di mostrare elementi da div#list sopra di sé?

Preferibilmente vorrei evitare di JS, jQuery, ecc o per lo meno nel layout:

<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;} 

A cura

Grazie a @ centr0 e @TJ Crowder la la cosa fondamentale da capire qui è che position:relative in .wrapper "contiene" qualsiasi elemento che ha position:absolute. È come dichiarare i limiti per .bottom. Senza position:relative in .wrapper, .bottom si interromperà quello div

Answer 2

Io corro ad un problema simile. La soluzione di Val è buona, ma ha un problema: il div interno si attaccherà al fondo, ma non influirà sull'altezza del div parrent, grazie alla sua "posizione: assoluta"; (è fuori dal flusso del layout di pagina).

ecco la mia soluzione ampliata per chiunque che ha problema simile:

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

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

Come potete vedere, ho impostato altezza della .bottom ang padding-bottom del wrapper. Lo svantaggio è che l'altezza del footer è su due punti. Ma penso che sia una buona soluzione per esempio per la lista dei prodotti, dove c'è altezza fissa nel footer della scatola (come per il prezzo, ecc.).

Ricorda che ogni volta che si imposta "position: absolute;", l'elemento sarà posizionato in modo assoluto rispetto al div del primo genitore, che ha impostato l'attributo position. O, eventualmente, contro la pagina stessa.