PyVis生成vis-network节点图canvas元素干扰尺寸设置问题

问题复现特征 #

• 预设图容器#mynetwork样式为width: 100%、height: 95%，源码未手动定义canvas标签
• 浏览器打开导出的HTML时，图形高度无法达到预设的95%占比
• 开发者工具排查确认：vis-network脚本运行时自动注入canvas元素，其自带的行内element.style宽高属性覆盖了预设尺寸规则，手动禁用该行内样式后显示正常
• 排查参考材料：原始HTML代码、实际渲染截图、预期渲染截图、自动注入canvas后的DOM源码

修复方案 #

方案1：PyVis生成阶段配置（推荐，一劳永逸） #

初始化Network对象时直接配置正确的尺寸参数，同时追加自定义样式从根源避免样式覆盖：

from pyvis.network import Network

# 初始化时配置宽高，高度建议用vh视口单位，比百分比更稳定，不需要依赖父元素高度
net = Network(
    width="100%",
    height="95vh",
    # 此处保留你原有的其他配置，比如directed、bgcolor、font_color等
)

# 注入自定义CSS，解决样式覆盖和父元素高度基准问题
net.add_css("""
/* 清除默认边距，撑满视口给百分比尺寸提供参照 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
/* 强制canvas继承父容器尺寸，覆盖JS动态注入的行内样式 */
#mynetwork canvas {
    width: 100% !important;
    height: 100% !important;
}
""")

# 后续正常添加节点、边，导出HTML即可
# net.add_node(...)
# net.add_edge(...)
net.write_html("network_graph.html")

方案2：直接修改已导出的HTML文件 #

如果已经生成了HTML文件，不需要重新运行PyVis代码，直接打开HTML文件做两处修改：

1. 在<head>标签内追加以下样式代码：

<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#mynetwork canvas {
    width: 100% !important;
    height: 100% !important;
}
</style>

2. 找到原有#mynetwork的样式定义，如果高度写的是95%，可以直接改成95vh，直接以浏览器视口高度为基准，不需要依赖父元素高度，适配更稳定。

问题原因说明 #

vis-network初始化时会读取容器当前的计算宽高，把读到的固定像素值直接写到canvas的行内样式上。如果脚本执行时容器还没完成布局（比如父元素没有设置明确高度、页面渲染资源未加载完成），它读到的高度值就是错误的，后续也不会自动跟随容器尺寸适配，就会出现尺寸不符合预期的问题。

注：样式里加的!important只会提升CSS规则优先级，覆盖行内样式的尺寸定义，不会影响vis-network的节点渲染、拖拽、缩放等交互逻辑。

内容的提问来源于stack exchange，提问作者Shashi123