如何在Python/Django中修改plotly_app iframe父级div的高度

解决方案 #

你遇到的问题根源是Plotly自动生成的外层响应式容器默认通过padding-bottom撑高，height设为0是响应式布局的常规实现，只修改iframe内部元素的百分比高度不会生效，因为父容器没有明确高度值，可通过以下任意一种方法解决：

• 调整嵌入参数：你提到的ratio参数直接控制padding-bottom值，该值对应容器高度/宽度的比例，直接将ratio调整为你需要的数值即可，比如要容器高度为宽度的40%，就将ratio设为0.4即可自动适配。
• 自定义CSS强制覆盖：从浏览器开发者工具复制目标div的选择器，添加CSS规则覆盖默认样式即可，示例代码如下：

/* 请将下面的选择器替换为你实际复制的父div选择器 */
.dash-generated-parent-div {
  height: 600px !important; /* 改成你需要的固定高度 */
  padding-bottom: 0 !important;
}
/* 同步修改iframe高度适配父容器 */
.dash-generated-parent-div iframe {
  height: 100% !important;
}

• JS动态修改：如果不方便加CSS规则，可在页面引入JS代码在加载完成后修改容器样式：

document.addEventListener('DOMContentLoaded', () => {
  // 替换成你的父div选择器
  const targetDiv = document.querySelector('div[style*="padding-bottom"]');
  if (targetDiv) {
    targetDiv.style.height = '500px';
    targetDiv.style.paddingBottom = '0';
    targetDiv.querySelector('iframe').style.height = '100%';
  }
})

• 外层嵌套自定义容器：在调用plotly_app的位置外层套一个你自己写的div，给这个div设置明确高度后，强制内部Plotly生成的容器继承高度：

<div class="plotly-wrapper" style="height: 700px; width: 100%;">
  <!-- 原来的plotly_app调用代码放这里 -->
</div>

.plotly-wrapper > div {
  height: 100% !important;
  padding-bottom: 0 !important;
}
.plotly-wrapper iframe {
  height: 100% !important;
}

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