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

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

小提琴：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

您应该只添加另一个明确声明“位置：相对”的外部包装块，然后它将起作用。

在这种情况下：

<style>
#outer {
    position: relative;
    width: 100%;
    height: 100%;
}
</style>

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

它会解决你的问题。

Answer 3

你可以calc这样使用：

width: calc(100% - Padding)

Answer 4

将 left:0px 添加到您的绝对 ID。它以他的相对 id 从 0px 开始