높이가 100 %이면 캔버스가 div의 맨 아래까지 확장되지 않는 이유는 무엇입니까?

Question

여기 내 코드 & HTML 마크 업입니다 :

$(document).ready(render) 
 

 

 
function render() { 
 

 
    wl = [['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]]; 
 

 
    $canvas = $('.wordcloud-canvas')[0]; 
 
    
 
    $canvas.width = $canvas.offsetWidth; 
 
    $canvas.height = $canvas.offsetHeight; 
 

 
    
 
    options = { 
 
    list   : wl, 
 

 
    weightFactor : 12, 
 
    color   : '#f02222', 
 
    rotateRatio : 0, 
 
    rotationSteps : 0, 
 
    shuffle  : false, 
 
    backgroundColor: 'white', 
 
    drawOutOfBound : false, 
 
    gridSize  : 16 
 
    }; 
 
    
 
    window.WordCloud($canvas, options); 
 
    
 
}

.wordcloud-view { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.wordcloud-container { 
 
    display: block; 
 
    border: 1px blue solid; 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 700px; 
 
} 
 

 
.wordcloud-canvas { 
 
    display: block; 
 
    position: relative; 
 
    border: 2px green solid; 
 
    padding: 5px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wordcloud-view"> 
 
    <div class="wordcloud-container"> 
 
\t <canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas> 
 
\t 
 
    <div></div> 
 
</div></div>

내가 이해하지 못하는 것은 당신이 스크린 샷에서 볼 수 있듯이 캔버스가 height: 100%

에도 불구하고 수직으로 확장되지 않는 이유입니다 ,

캔버스가 완전히 확장 된 경우 녹색 테두리가 파란색 테두리보다 겹치지 않게됩니다.

왜 그런 일이 발생하지 않습니까? 다른 position 및 display 설정을 시도했습니다.

Answer 1

높이 비율은 모든 부모 요소의 높이가 정의 된 경우에만 작동합니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/height

이 비율은 생성 된 박스의 함유 블록의 높이에 대하여 계산된다. 상기 수용 블록의 높이가 명시 적으로 지정하지 않은 경우 (즉, 그 내용 높이에 의존한다),이 소자는 절대적 위치하지 않는 상기 값 간단하게 케이스에 auto

로 계산 HTML 바디는, 예를 들면, 높이를 정의 :

html,body { 
    height:100%; 
} 

데모

$(document).ready(render) 
 

 

 
function render() { 
 

 
    wl = [['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]]; 
 

 
    $canvas = $('.wordcloud-canvas')[0]; 
 
    
 
    $canvas.width = $canvas.offsetWidth; 
 
    $canvas.height = $canvas.offsetHeight; 
 

 
    
 
    options = { 
 
    list   : wl, 
 

 
    weightFactor : 12, 
 
    color   : '#f02222', 
 
    rotateRatio : 0, 
 
    rotationSteps : 0, 
 
    shuffle  : false, 
 
    backgroundColor: 'white', 
 
    drawOutOfBound : false, 
 
    gridSize  : 16 
 
    }; 
 
    
 
    window.WordCloud($canvas, options); 
 
    
 
}

html,body { 
 
    height:100%; 
 
} 
 
.wordcloud-view { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.wordcloud-container { 
 
    display: block; 
 
    border: 1px blue solid; 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 700px; 
 
} 
 

 
.wordcloud-canvas { 
 
    display: block; 
 
    position: relative; 
 
    border: 2px green solid; 
 
    padding: 5px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wordcloud-view"> 
 
    <div class="wordcloud-container"> 
 
\t <canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas> 
 
\t 
 
    <div></div> 
 
</div></div>