Question

我具有以下结构：

<th class="condition">
    <div class="progress_container">
        <div class="bar_container">
            <span class="progress_green" style="width:14%;"></span>
            <span class="progress_red" style="width:86%;"></span>
        </div>
        <div class="progress_text">14% %</div>
    </div>
</th>

我在表中有一个th元素，类为“ condition”，chrome表示其宽度和高度为132.5 x40。然后在它的div内部，有一个名为“ progress_container”的类，其宽度和高度都设置为100％，但由于某些奇怪的原因，结果是132.5 x 0。因此，其他所有一切都崩溃了（每个孩子的身高为0％）。为什么是这样？我如何使父元素的高度起作用？

这是相关的CSS：

.progress_container{
    position: relative;
    width: 100%;
    height: 100%;
}

.bar_container{
    position: absolute;
    text-align: center; 
    vertical-align: top;
    width: 101%;
    height: 100%;
    top: -0.5%;
    left: -0.5%;
}

.progress_green{
    display: inline-block;
    background-color: #33ff33;
    height: 25px;
    border-radius: 2px 0px 0px 2px;
    clear:both;
}

.progress_red{
    display: inline-block;
    background-color: #ff3333;
    height: 25px;
    border-radius: 0px 2px 2px 0px;
    clear:both;
}

.progress_text{
    position: absolute;
    text-align: center; 
    vertical-align: top;
    top: 5px;
    width:100%;
}

Answer 1

答案：

.bar_container {
   position: relative;
}

您彼此之间有两个连续的绝对定位元素，应该有一个亲戚，并且子代可以是绝对的。您可以拥有更多绝对子级，但级别相同。

即使父表单元格具有高度，CSS中的高度100％也会给出0

1 个答案: