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

【问题标题】：CSS: How to prevent div from overlapping parent height or parent borderCSS：如何防止 div 重叠父高度或父边框
【发布时间】：2026-01-31 10:40:01
【问题描述】：

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

提前非常感谢，迈克

【问题讨论】：

你能用代码创建一个 jsfiddle 吗？这将有助于更好地理解您的代码。
你试过overflow:hidden 吗？
尝试为progressBar添加一些填充。
@Akshay：谢谢 - 会试试这个。
@Akshay：更新：溢出成功了——这似乎有效！谢谢。 :)

标签： html css height

【解决方案1】：

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

【讨论】：

【解决方案2】：

看看here

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

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

【讨论】：

谢谢你 - 你能解释一下吗？
当然，您可以通过将整个宽度（包装器的宽度）除以其中的 div 数来计算包装器内每个 div 的宽度。
谢谢，但子 div 彼此水平显示。
看起来这个问题已经通过 Akshay 的建议得到了解决（通过添加溢出：隐藏）。
@无论如何感谢您的帮助 - 这也很高兴知道。 :)