無法達到100％的身高

Question

我創建了一個div，並在div內制作了一些條形圖，為此必須將max-height和height設置為100％，但我不知道出了什么問題，因為沒有顯示高度100％。 誰能幫我這個忙。 我想顯示要根據值放置的條形高度，但問題是，高度僅在我以像素為單位設置高度時顯示，當我將高度設置為100％時我不希望顯示高度為100 ％任何人都可以為我解決此問題，謝謝您的幫助。

這是我的代碼-

 .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

我不知道是什么問題，因為高度100％沒有顯示

僅當父元素也具有高度時（以顯式方式設置，或基於其他屬性隱式設置（例如，給定top 和 bottom的絕對定位元素）），高度百分比才有效。

您的.bars_area高度不高，因此嘗試.bars_area嘗試以百分比為單位的高度也不起作用。

Answer 2

就像其他人所說的那樣，它是行不通的。 我可以建議你采用不同的方法，如果你喜歡，你可以做it.Use div的，而不是span.Remember我的我只是建議你根據你的代碼不是答案另一種方法。

 .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

首先將.bars_area設置為高度100％，然后在.bars上設置相對位置，我希望這是您想要的。

 .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

父元素的邊距和填充應設置為0。然后，子元素可以被賦予height:100%;屬性height:100%;