Height 100% in CSS gives 0 even if parent table cell has height

Question

I have following structure:

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

I have a th element, class "condition" in a table, and chrome says it has width and height 132.5 x 40. Then I have div inside of it, class "progress_container", that has both width and height set to 100%, but result is 132.5 x 0, for some odd reason. And because of that, all else falls apart (height of every child is 0%). Why is this? How would I get height of parent element to work?

Here is the relevant 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%;
}

I am not sure what you mean. This looks fine. Use FF dev tools. Chrome dev tools are weird and often shows different result... https://jsfiddle.net/j5Ledx1z/5/ — Simon Jensen, Aug 28 '18 at 08:06
@TorjescuSergiu That worked. So the problem was somewhere in between position: absolute and position: relative — Nyxeria, Aug 28 '18 at 08:13
Yes, you had two consecutive absolute positioned elements within each other, there should be one relative and the child can be absolute. You can have more absolute children, but at the same level. — Torjescu Sergiu, Aug 28 '18 at 08:16
share full code, actually you are using % values and there is no parent with fixed value so it won't work — Temani Afif, Aug 28 '18 at 08:32

score 0 · Answer 1 · answered Aug 28 '18 at 08:17

0

Answer:

.bar_container {
   position: relative;
}

You had two consecutive absolute positioned elements within each other, there should be one relative and the child can be absolute. You can have more absolute children, but at the same level.

answered Aug 28 '18 at 08:17

Torjescu Sergiu

1,483
10
24

`You can have more absolute children, but at the same level.` --> why this? we can have nested absolute without any problem – Temani Afif Aug 28 '18 at 08:30
check his example – Torjescu Sergiu Aug 28 '18 at 09:23
his example has nothing to do with what you said ... we can have nested absolute element without any issue, from where you got such information where absolute need to be at the same level? – Temani Afif Aug 28 '18 at 09:34

Height 100% in CSS gives 0 even if parent table cell has height

1 Answers1