html - 如何让绝对 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))。我假设因为它绝对忽略了这一点，所以我正在寻找一种方法来解决这个问题。

fiddle :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