如何让绝对div适合父宽度/填充？

Question

我需要将定位设置为绝对，因此我可以将#bottom固定在屏幕的底部。我还需要有这个适合容器的宽度/填充#panel。但是，当我将位置设置为绝对值时，宽度仅填充整个屏幕的宽度，我怎样才能阻止它？我需要#bottom以适应#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%; 
} 

以上是发生了什么事的图像。绿色是填充，蓝色是它应该适合的内容区域（深蓝色是我试图适合内容区域的实际div（#panel））。我假设，因为它是绝对的，它忽略了这一点，我正在寻找一种方法来解决这个问题。

小提琴：http://jsfiddle.net/qTJhW/

感谢

Answer 1

与你在做什么的问题是，它走的是整个宽度，包括填充，并对准左侧宽度的填充。您可以通过使用包含相对位置的包装来解决此问题。另外不要忘记使#panel位置相对。

你最终的代码是沿着这些路线的东西：

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

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

下面是一个例子： http://codepen.io/DanielVoogsgerd/pen/Lezjy

Answer 2

添加左：0像素到你的绝对id。它启动形式0像素与他相对ID

Answer 3

您可以使用calc这样的：

width: calc(100% - Padding)