django_plotly_dash嵌入iframe时div标签导致仪表盘无法全屏渲染

那个包裹iframe的额外div是django_plotly_dash自带的plotly_app inclusion tag生成的。你找到的plotly_app函数里定义了dstyle样式，该样式会传入对应的模板django_plotly_dash/plotly_app.html，用来生成带padding-bottom:10%的div，这就是仪表盘只能显示小窗口的直接原因。

方法1：调整ratio参数（最简单） #

直接在调用plotly_app时设置ratio=1，让自动生成的div的padding-bottom变为100%，刚好撑满父容器：

{% load plotly_dash %}
<div class="{% plotly_class name='report' %}" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    {% plotly_app name='report' initial_arguments=context ratio=1 %}
</div>

注：你原代码中嵌套的内层<div style="position:absolute,top:0">可以去掉，无需额外嵌套

方法2：CSS强制覆盖样式 #

如果不想修改ratio参数，可通过CSS定位并重置自动生成div的样式：

.django-plotly-dash-app-report > div {
    position: static !important;
    padding-bottom: 0 !important;
    height: 100% !important;
    overflow: visible !important;
}

将这段CSS添加到项目静态CSS文件或模板的<style>标签中即可。

方法3：自定义模板（进阶） #

复制django_plotly_dash的plotly_app.html模板到你项目的templates/django_plotly_dash/目录下，修改模板内容去掉外层div：
原模板内容：

<div style="{{ dstyle }}">
  <iframe src="{{ src }}" style="{{ istyle }}" frameborder="{{ fbs }}" sandbox="{{ sandbox_settings }}"></iframe>
</div>

修改后：

<iframe src="{{ src }}" style="{{ istyle }}" frameborder="{{ fbs }}" sandbox="{{ sandbox_settings }}"></iframe>

这样调用plotly_app时就不会生成额外div，iframe会直接渲染到你自定义的容器中。

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