为什么100％高度不会使画布延伸到div的底部？

Question

这是我的代码＆amp; html标记：

＆＃13;

＆＃13;

$(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);
  
}

＆＃13;

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

＆＃13;

<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">
	  <canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas>
	 
  <div></div>
</div></div>

＆＃13;

＆＃13;

＆＃13;

我不明白为什么画布不垂直延伸，尽管height: 100%

正如您在屏幕截图中看到的那样，

如果画布完全展开，我会看到绿色边框与蓝色边框的重叠程度更低。

为什么不发生？我尝试了不同的position和display设置。

Answer 1

高度百分比仅在所有父元素也具有定义的高度时才起作用。

  

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

     

百分比是根据的高度计算的   生成的包含块的框。如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并非绝对定位，值   计算到auto

在你的情况下，只需制作html，body就定义了高度，例如：

html,body {
  height:100%;
}

演示

＆＃13;

＆＃13;

$(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);
  
}

＆＃13;

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

＆＃13;

<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">
	  <canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas>
	 
  <div></div>
</div></div>

＆＃13;

＆＃13;

＆＃13;