Jak uzyskać bezwzględne dopasowanie szerokości/obicia rodzica?

Question

Muszę ustawić położenie na absolutne, aby można było ustawić na stałe #bottom u dołu ekranu. Też muszę mieć to pasuje do szerokości/wyściółki pojemnika #panel. Kiedy jednak ustawiam pozycję na absolutną, szerokość tylko wypełnia całą szerokość ekranu, jak mogę to zatrzymać? Potrzebuję #bottom, aby zmieścić się wewnątrz szerokości/wypełnienia #panel.

HTML:

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

CSS:

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

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

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

Powyżej jest to obraz tego, co się dzieje. Zielony to dopełnienie, a niebieski to obszar zawartości, do którego powinien pasować (ciemnoniebieski to rzeczywisty element div (#panel), który próbuję dopasować do obszaru zawartości). Zakładam, że to absolutne, że to ignoruje, szukam sposobu na obejście tego.

Fiddle: http://jsfiddle.net/qTJhW/

Dzięki

Answer 1

Problem z tym, co robisz, jest to, że bierze całą szerokość łącznie z wyściółką i dostosowanie go do lewej strony szerokość padding. Możesz to naprawić, używając opakowania o względnej pozycji. Nie zapomnij również o względnej pozycji #panel.

Kod skończyć z jest coś wzdłuż tych linii:

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

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

Oto przykład: http://codepen.io/DanielVoogsgerd/pen/Lezjy

Answer 2

dodać left: 0px do twój absolutny id. rozpocznie formularz 0px z jego względnej id

Answer 3

Można użyć calc takiego:

width: calc(100% - Padding)