如何让绝对定位的div元素遵循父元素的填充？

Question

这是我的HTML/CSS 目前 的样子：

这是我想要的样子：

我应该如何修改下面的HTML/CSS，以达到我想要的效果？

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

谢谢

- jskidd3

---

我之前为你的问题写的最后一个笔记本是否解决了问题？http://codepen.io/DanielVoogsgerd/pen/Lezjy。 在我的屏幕上，它看起来像是你想要实现的。 - Daniël Voogsgerd

太好了！请将代码作为答案提交，以便我可以选择它 :) - jskidd3

Answer 1

您可以使用包装器来解决此问题。

您的HTML代码应该类似于以下内容：

<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

- Daniël Voogsgerd

---

非常感谢！感激您抽出时间帮我解决这个问题。 - jskidd3

Answer 2

In css

* {
    box-sizing: border-box;
}

- drjorgepolanco