Force div tuyệt đối để nghe đệm của cha mẹ?

Question

Đây là những gì HTML của tôi/CSS hiện trông giống như:

Dưới đây là những gì tôi muốn nó trông giống như:

Làm thế nào tôi có thể thay đổi HTML/CSS bên dưới để nó thể hiện cách tôi muốn nó?

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

Cảm ơn

Answer 1

Bạn có thể khắc phục vấn đề bằng cách sử dụng một wrapper

HTML của bạn sẽ trông giống cùng những dòng này:

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

Và CSS của bạn:

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

Đây là một cây bút với kết quả cuối cùng: http://codepen.io/DanielVoogsgerd/pen/Lezjy

Answer 2

Trong css

* { 
    box-sizing: border-box; 
}