無法獲得高度爲100％

Question

我已經創建了一個div，並在div中創建了我必須將最大高度和高度設置爲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沒有這樣的高度，所以嘗試在兒童百分比的高度也不起作用。

Answer 2

正如別人所說，它不會工作。我可以建議你採用不同的方法，如果你喜歡你可以做到這一點。使用div而不是span。記住我只是根據你的代碼暗示你另一種方法而不是答案。

.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%;