<分区>
标签 html css html-table
<分区>
我有以下结构:
<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 x 40。然后我在它里面有一个 div，类“progress_container”，它的宽度和高度都设置为100%，但出于某种奇怪的原因，结果是 132.5 x 0。正因为如此，其他一切都崩溃了(每个 child 的高度都是 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%;
}
最佳答案
回答:
.bar_container {
position: relative;
}
你有两个连续的绝对定位元素，应该有一个相对的，子元素可以是绝对的。您可以拥有更多绝对子级，但级别相同。
关于html - 即使父表格单元格具有高度，CSS 中的高度 100% 也会给出 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52052918/