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

【问题标题】：How to have absolute div fit parent width/padding?如何让绝对 div 适合父宽度/填充？
【发布时间】：2020-12-06 06:19:46
【问题描述】：

我需要将定位设置为绝对，以便将#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/

谢谢

【问题讨论】：

尝试添加位置：相对于#panel。
这当然改善了情况。 #bottom div 不再填满整个屏幕，但它仍然忽略 #panel 的填充（图像上的绿色）。
我在办公室服务器 atm 后面。所以无法访问图片。你可以为此创建一个小提琴吗？
jsfiddle.net/qTJhW
尝试添加“left:0px;”到#bottom

标签： html css

【解决方案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

【讨论】：

由于 HTML 的结构，这并不能完全回答我的问题，真的是我的错。这就是我目前所拥有的，如果您可以修改您的答案以适应这一点，我将不胜感激：jsfiddle.net/qTJhW
left:0px for #bottom 解决了您的问题
你能改变html吗？还是只需要底部div内的更新？就像阿德里安说的那样，您总是可以使用以下命令将框向左对齐：left: 0;
你能重新检查一下笔吗？你是这个意思吗？ codepen.io/DanielVoogsgerd/pen/Lezjy
@DanielVoogsgerd 我发布了一个新问题来帮助描述我的新情况：stackoverflow.com/questions/17923153/…

【解决方案2】：

你可以像这样使用calc：

width: calc(100% - Padding)

【讨论】：

【解决方案3】：

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

在这种情况下：

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

它会解决你的问题。

【讨论】：

【解决方案4】：

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

【讨论】：