Tableau Viz嵌入iframe后无法正确适配尺寸问题求助

• 已为嵌入的Tableau图表设置指定尺寸容器，但图表高度超出范围，底部存在大量留白，页面还可左右滚动
• 需求：图表精准适配容器，无滚动条且无法触发滚动

当前代码 #

<div id='credits-awarded' style='
            justify-content: center
            ;align-items: center;
            '>
            <script type='module' src='https://example.com/javascripts/api/tableau.embedding.3.latest.min.js'></script><tableau-viz id='tableau-viz' src='https://example.com/t/Public/views/MES_CompHours/CompletionHours?toolbar=no' 
            width='400px' height='170px' hide-tabs toolbar='hidden' ></tableau-viz> 
</div>

问题截图 #

解决方法 #

1. 修复父容器样式 #

父容器使用了justify-content和align-items但未设置display:flex，导致居中属性不生效；同时添加overflow:hidden禁止容器内滚动，且明确容器固定尺寸：

<div id='credits-awarded' style='
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 170px;
    overflow: hidden;
'>

2. 优化tableau-viz组件配置 #

• 移除重复的工具栏参数（toolbar=no和toolbar='hidden'保留一个即可）
• 将组件宽高设为100%，让其完全填充父容器
• 添加autosize="fit"属性，让Tableau视图自动适配容器尺寸
• 添加frameborder="0"避免默认边框影响尺寸

修改后的组件代码：

<tableau-viz id='tableau-viz' 
             src='https://example.com/t/Public/views/MES_CompHours/CompletionHours?toolbar=no' 
             width='100%' 
             height='100%' 
             hide-tabs 
             toolbar='hidden'
             autosize="fit"
             frameborder="0"
></tableau-viz>

3. 调整Tableau视图本身的尺寸（可选） #

如果上述方法仍有留白，可登录Tableau服务器操作对应视图：

• 进入「编辑」模式，调整画布默认尺寸，使其与嵌入容器的宽高比例一致
• 隐藏视图中不必要的边距、标题等元素，减少额外留白

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