Question

我是CSS的新手，希望有人能帮助我。

我正在尝试创建一个简单进度条（以后用于JS），它包含三个单独的颜色块（红色，黄色，绿色）。

到目前为止，我的下面一般都有效，但颜色块（class "progressBar"）的高度总是与父div（class="progressWrapper"）重叠几个像素。

我想要的是一个条形图，其中颜色块仅填充其背景但不重叠或其边框以及父div周围的可见边框。

在我的代码中，父div似乎并不控制子div。有人能告诉我这里我做错了什么吗？

我的CSS（相关部分）：

.bgGreen {
    background-color: green;
}
.bgRed {
    background-color: red;
}
.bgYellow {
    background-color: yellow;
}
.progressWrapper {
    border: 1px solid #ccc;
    height: 16px;
    line-height: 16px;
    padding: 0;
}
.progressBar {
    height: 100%;
    line-height: 100%;
    margin: 0;
    max-height: 100%;
}

我的HTML：

<div class="col-12 progressWrapper">
    <div class="col-4 progressBar bgRed"></div>
    <div class="col-4 progressBar bgYellow"></div>
    <div class="col-4 progressBar bgGreen"></div>
</div>

更新：

.col-4 {
    width: 33.33%;
}
.col-12 {
    width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

非常感谢，麦克

Answer 1

通过添加overflow: hidden;解决了这个问题 - 感谢Akshay！

Answer 2

查看here

使用CSS .progressbar函数计算calc()的高度，有关此here的更多信息。

height: calc(56px / 3); /* Height of wrapper devided by number of divs */

CSS：如何防止div重叠父高度或父边框

2 个答案: