javascript - 为什么100％的高度不会使 Canvas 延伸到div的底部？

这是我的代码和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">
	  <canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas>

  <div></div>
</div></div>

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

您可以在屏幕截图中看到，



如果画布完全展开，我会看到绿色边框或多或少与蓝色边框重叠。

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

最佳答案

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


  https://developer.mozilla.org/en-US/docs/Web/CSS/height
  
  百分比是相对于
  生成框的包含块。如果包含的高度
  没有明确指定块（即，取决于内容
  高度），并且此元素不是绝对定位的
  计算为auto


在您的情况下，只需使html，body具有定义的高度，例如：

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

  <div></div>
</div></div>

关于javascript - 为什么100％的高度不会使 Canvas 延伸到div的底部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47026034/