Css 引导-将进度条放置在父div的底部

我试图使用position:absolute和bottom:0将进度条放置在父div的底部，但这些样式似乎与进度条冲突

<div class="progress" style="position:absolute; bottom:0px;">
        <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
        0%
        </div>
</div>

0%

我创造了这把小提琴：

---

正确的方法是什么？

进度条的

位置：absolute

问题是进度条的宽度

将进度条的宽度设置为

width:96%和您将有一个相应的进度条

进度条位置：绝对的问题是进度条的宽度

将进度条的宽度设置为
width:96%和您将有一个相应的进度条

问题在于位置设置为绝对位置。您的宽度不会自动设置为全宽

您可以尝试以下方法：

.progress{margin:10px；}/*应用于此类而不是正文*/

<div style="position:absolute; bottom:0px;width: 100%;">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
    </div>
</div>


下一步




0%
0%
问题在于位置设置为绝对位置。您的宽度不会自动设置为全宽

您可以尝试以下方法：

.progress{margin:10px；}/*应用于此类而不是正文*/

<div style="position:absolute; bottom:0px;width: 100%;">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
    </div>
</div>


下一步




0%
0%
您提出了一个可行的解决方案，但您可能需要注意，进度条并不总是占据父容器的整个宽度，其百分比为96%，因为4%并不总是等于主体包含的20px边距，具体取决于窗口大小。我同意您的看法。就在JSFIDLE中提供的示例中，我提供的解决方案的变化最小。您提出了一个可行的解决方案，但您可能需要注意的是，进度条并不总是以96%的百分比占据父容器的整个宽度，因为根据窗口大小，4%并不总是等于主体包含的20px边距。我同意您的看法。就在jsfiddle中提供的示例中，我提供的解决方案的更改量最小。