如何让绝对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

您可以像这样使用calc：

width: calc(100% - Padding)

Answer 3

您应该只添加另一个外部包装程序块，并明确声明“ position：relative” ，这样就可以了。

在这种情况下：

for

它将解决您的问题。

Answer 4

将左：0px添加到您的绝对ID。它从他的亲戚身份

开始形成0px