Forzare il div assoluto per ascoltare il padding del genitore?

Question

Questo è ciò che il mio HTML/CSS attualmente assomiglia:

Ecco quello che voglio farlo sembrare come:

Come posso modificare il HTML/CSS di seguito in modo che mostri come lo voglio?

HTML:

<div id="panel"> 
    <div id="bottom"> 
     <div class="update"></div> 
    </div> 
</div> 

CSS:

.update { 
    width: 100%; 
    background-color: #006699; 
    text-align: center; 
    height: 56px; 
    color: white; 
} 

#bottom { 
    position: absolute; 
    bottom: 20px; 
    width: 100%; 
    left: 0; 
} 

#panel { 
    width: 21.25%; 
    height: 100%; 
    background-color: #0794ea; 
    float: left; 
    padding: 0 1.5%; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    position: relative; 
} 

Grazie

Answer 1

È possibile risolvere il problema utilizzando un wrapper

tuo HTML guarderà qualcosa in queste righe:

<div id="panel"> 
    <div class="wrapper"> 
     <div id="bottom"> 
      <div class="update"> 
       a   
      </div> 
     </div>  
    </div> 
</div> 

E il tuo CSS:

#panel { 
    width: 21.25%; 
    height: 100%; 
    background-color: #0794ea; 
    float: left; 
    padding: 0 1.5%; 
    box-sizing: border-box; 
} 

.update { 
    width: 100%; 
    background-color: #006699; 
    text-align: center; 
    height: 56px; 
    color: white; 
} 

.wrapper { 
    position: relative; 
    height: 100%; 
} 

#bottom { 
    position: absolute; 
    bottom: 20px; 
    left: 0; 
    width: 100%; 
    background: yellow; 
} 

Ecco una penna con il risultato finale: http://codepen.io/DanielVoogsgerd/pen/Lezjy

Answer 2

in CSS

* { 
    box-sizing: border-box; 
}