unable to get height as 100 percent - html

Question

I have created a div and inside the div I have made bars for which I have to set max-height and height as 100% but I do not know what is the problem as the height 100% is not showing. Can anyone help me out with this. I want to show the bars height to be placed according to the values but the problem is the height is only showing when I am setting height in pixels it is not working when I place height as 100% I want to show the height to be 100% can anyone help me out with fixing this issue for me please would be grateful for your help.
Here is my code -
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
width: 27px;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<span class="line_gr"></span>
<p>2016</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2015</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2014</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2013</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2012</p>
</div>
</div>
</div>
</div>

Answer 1

I do not know what is the problem as the height 100% is not showing
A height in percent only works if the parent element also has a height (either set explicitly, or implicitly based on other properties, such as an absolute positioned element with top and bottom given).
Your .bars_area does not have such a height, so trying a height in percentage on the children won’t work either.

Answer 2

As others says it won't work. I can suggest you a different approach if you like you can do it.Use div instead of span.Remember I am just suggesting you another approach according your code not an answer.
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
.inner {
position: absolute;
width:5px;
height:200px;
background: grey;
bottom:25px;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
overflow: hidden;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<div class="inner"></div>
<p>2016</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2015</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2014</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2013</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2012</p>
</div>
</div>
</div>
</div>

Answer 3

First set .bars_area to height 100% and then set position relative on .bars
I hope it is what you want.
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
height: 100%;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
width: 27px;
position: relative;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<span class="line_gr"></span>
<p>2016</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2015</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2014</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2013</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2012</p>
</div>
</div>
</div>
</div>

Answer 4

The parent element should have margins and padding set to 0. Then, the child element can be given that property of height:100%;