Html 无法获得100%的高度

我已经创建了一个div，在div内我制作了条，我必须将最大高度和高度设置为100%，但我不知道问题出在哪里，因为没有显示100%的高度。有人能帮我解决这个问题吗。我想根据这些值显示要放置的条形高度，但问题是，当我以像素为单位设置高度时，高度仅显示。当我将高度设置为100%时，高度不起作用。我想显示高度为100%。有人能帮我解决此问题吗？请感谢您的帮助

这是我的密码-

条形图{
宽度：341px；
高度：258px；
背景色：#fff；
位置：绝对位置；
顶部：15px；
左：15px；
填充：20px 12px；
显示：块；
边框：1px实心#A3A3；
}
跨距线{
显示：块；
背景色：#3d4a7b；
保证金：自动；
宽度：24px；
最大高度：177像素；
左边距：0；
身高：100%；
}
.酒吧区{
宽度：238px；
浮动：对；
位置：绝对位置；
底部：-8px；
右：0；
}
.酒吧{
浮动：左；
利润率：0.10px；
边缘顶部：20px；
身高：100%；
宽度：27px；
}
.bar>p{
字体大小：12px；
保证金：0；
线高：30px；
字体大小：粗体；
}
.头部图>h2{
字体大小：14px；
字体大小：粗体；
边缘底部：6px；
颜色：#000；
}
巴鲁大街{
高度：200px；
位置：相对位置；
}
.bar\u main>.line{
高度：60px；
宽度：100%；
边框顶部：1px实心#ccc；
线高：20px；
字体大小：12px；
}

标题
300万密耳
200,000
100,000
2016年

2015年

2014年

2013年

2012年

我不知道是什么问题，因为没有显示100%的高度

---

仅当父元素也有高度时，以百分比表示的高度才起作用（可以显式设置，也可以基于其他属性隐式设置，例如给定了

top

和

bottom

的绝对定位元素）

---

您的

.bar\u区域

没有这样的高度，因此在孩子身上尝试以百分比表示的高度也不起作用

正如其他人所说，这是行不通的。如果你愿意，我可以建议你一种不同的方法。使用div而不是span。记住，我只是根据你的代码建议你另一种方法，而不是答案

条形图{
宽度：341px；
高度：258px；
背景色：#fff；
位置：绝对位置；
顶部：15px；
左：15px；
填充：20px 12px；
显示：块；
边框：1px实心#A3A3；
}
.内部{
位置：绝对位置；
宽度：5px；
高度：200px；
背景：灰色；
底部：25px；
}
跨距线{
显示：块；
背景色：#3d4a7b；
保证金：自动；
宽度：24px；
最大高度：177像素；
左边距：0；
身高：100%；
}
.酒吧区{
宽度：238px；
浮动：对；
位置：绝对位置；
底部：-8px；
右：0；
}
.酒吧{
浮动：左；
利润率：0.10px；
边缘顶部：20px；
身高：100%；
溢出：隐藏；
}
.bar>p{
字体大小：12px；
保证金：0；
线高：30px；
字体大小：粗体；
}
.头部图>h2{
字体大小：14px；
字体大小：粗体；
边缘底部：6px；
颜色：#000；
}
巴鲁大街{
高度：200px；
位置：相对位置；
}
.bar\u main>.line{
高度：60px；
宽度：100%；
边框顶部：1px实心#ccc；
线高：20px；
字体大小：12px；
}

标题
300万密耳
200,000
100,000
2016年

2015年

2014年

2013年

2012年

首先将.bar\u区域设置为100%高度，然后在.bar上设置相对位置 我希望这是你想要的

条形图{
宽度：341px；
高度：258px；
背景色：#fff；
位置：绝对位置；
顶部：15px；
左：15px；
填充：20px 12px；
显示：块；
边框：1px实心#A3A3；
}
跨距线{
显示：块；
背景色：#3d4a7b；
保证金：自动；
宽度：24px；
最大高度：177像素；
左边距：0；
身高：100%；
}
.酒吧区{
宽度：238px；
浮动：对；
位置：绝对位置；
底部：-8px；
右：0；
身高：100%；
}
.酒吧{
浮动：左；
利润率：0.10px；
边缘顶部：20px；
身高：100%；
宽度：27px；
位置：相对位置；
}
.bar>p{
字体大小：12px；
保证金：0；
线高：30px；
字体大小：粗体；
}
.头部图>h2{
字体大小：14px；
字体大小：粗体；
边缘底部：6px；
颜色：#000；
}
巴鲁大街{
高度：200px；
位置：相对位置；
}
.bar\u main>.line{
高度：60px；
宽度：100%；
边框顶部：1px实心#ccc；
线高：20px；
字体大小：12px；
}

标题
300万密耳
200,000
100,000
2016年

2015年

2014年

2013年

2012年

父元素的边距和填充应设置为0。然后，子元素可以被赋予

height的属性：100%
仅当父元素也具有明确的高度时，以百分比表示的高度才起作用。您的
.bars\u区域
没有，因此在孩子身上尝试以百分比表示的高度也不起作用。那么如何将其设置为获取高度properly@CBroe非常感谢，它帮助了我，请将您的评论作为答案发布，以便我可以接受。您应该在
px
中设置您的高度。