Javascript 为什么100%的高度不能使画布延伸到div的底部？

以下是我的代码和html标记：

$（文档）.ready（渲染）
函数render（）{
wl=[['hello'，12]，'dear'，10]，'a'，9]，'Joe'，5]，'8'，2]；
$canvas=$（'.wordcloud canvas'）[0]；
$canvas.width=$canvas.offsetWidth；
$canvas.height=$canvas.offsetHeight；
选项={
名单:西九龙，
权重因子：12，
颜色：'#f02222'，
旋转：0，
旋转步骤：0，
洗牌：错，
背景颜色：“白色”，
提取边界：假，
网格大小：16
};
WordCloud（$canvas，options）；
}

.wordcloud视图{
显示：块；
宽度：100%；
身高：100%；
}
.wordcloud容器{
显示：块；
边框：1px蓝色实心；
宽度：100%；
身高：100%；
最小高度：700px；
}
.wordcloud画布{
显示：块；
位置：相对位置；
边框：2个绿色实体；
填充物：5px；
宽度：100%；
身高：100%；
}

---

只有当所有父元素也具有定义的高度时，高度百分比才起作用

该百分比是根据建筑物的高度计算的 生成的包含块的框。如果容器的高度 块未明确指定（即，它取决于内容 高度），并且该元素不是绝对定位的，值 计算到

自动

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

html,body {
  height:100%;
}

演示

$（文档）.ready（渲染）
函数render（）{
wl=[['hello'，12]，'dear'，10]，'a'，9]，'Joe'，5]，'8'，2]；
$canvas=$（'.wordcloud canvas'）[0]；
$canvas.width=$canvas.offsetWidth；
$canvas.height=$canvas.offsetHeight；
选项={
名单:西九龙，
权重因子：12，
颜色：'#f02222'，
旋转：0，
旋转步骤：0，
洗牌：错，
背景颜色：“白色”，
提取边界：假，
网格大小：16
};
WordCloud（$canvas，options）；
}

html，正文{
身高：100%；
}
.wordcloud视图{
显示：块；
宽度：100%；
身高：100%；
}
.wordcloud容器{
显示：块；
边框：1px蓝色实心；
宽度：100%；
身高：100%；
最小高度：700px；
}
.wordcloud画布{
显示：块；
位置：相对位置；
边框：2个绿色实体；
填充物：5px；
宽度：100%；
身高：100%；
}

---

只有当所有父元素也具有定义的高度时，高度百分比才起作用

该百分比是根据建筑物的高度计算的 生成的包含块的框。如果容器的高度 块未明确指定（即，它取决于内容 高度），并且该元素不是绝对定位的，值 计算到

自动

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

html,body {
  height:100%;
}

演示

$（文档）.ready（渲染）
函数render（）{
wl=[['hello'，12]，'dear'，10]，'a'，9]，'Joe'，5]，'8'，2]；
$canvas=$（'.wordcloud canvas'）[0]；
$canvas.width=$canvas.offsetWidth；
$canvas.height=$canvas.offsetHeight；
选项={
名单:西九龙，
权重因子：12，
颜色：'#f02222'，
旋转：0，
旋转步骤：0，
洗牌：错，
背景颜色：“白色”，
提取边界：假，
网格大小：16
};
WordCloud（$canvas，options）；
}

html，正文{
身高：100%；
}
.wordcloud视图{
显示：块；
宽度：100%；
身高：100%；
}
.wordcloud容器{
显示：块；
边框：1px蓝色实心；
宽度：100%；
身高：100%；
最小高度：700px；
}
.wordcloud画布{
显示：块；
位置：相对位置；
边框：2个绿色实体；
填充物：5px；
宽度：100%；
身高：100%；
}

所以这个问题很可能只是特定于代码片段？我假设在大多数浏览器中，

body

的默认css是

100%

？这个规则也不适用于宽度，对吗？它似乎不一致否，默认情况下body和html没有设置的高度，因此它是

auto

，因此您需要设置它。至于宽度，除非另有设置，否则具有

块
元素的
显示
的任何元素均为100%宽度。它根据显示器的值而变化。例如，内联元素并没有设置宽度。所以这个问题很可能只是特定于代码段？我假设在大多数浏览器中，
body
的默认css是
100%
？这个规则也不适用于宽度，对吗？它似乎不一致否，默认情况下body和html没有设置的高度，因此它是
auto
，因此您需要设置它。至于宽度，除非另有设置，否则具有
块
元素的
显示
的任何元素均为100%宽度。它根据显示器的值而变化。例如，内联元素没有设置宽度。