element的el-tab-pane放iframe,高度不能自适应,如何解决?

列车
  • 36

html代码:

  <el-main style="height: 100%;">
                <el-row style="height: 100%;">
                    <el-col :span="24" style="height: 100%;">
                        <div class="grid-content bg-purple-dark" style="height: 100%;">
                            <div style="height: 100%;">

                                <el-tabs type="border-card" closable @tab-remove="removeTab" style="height: 100%;" >
                                    <template v-for="(item,index) in herf_list">
                                        <el-tab-pane :label="item.title" :name="index" style="height: 100%;" >
                                            <div style="height: 100%;"> 
                                                <iframe  :src="item.src" style="height: 100%;" height="100%" width="100%"></iframe>
                                            </div>
                                       </el-tab-pane>
                                    </template>
                                    
                            
                                </el-tabs>
                              
                            </div>
                         </div>
                    </el-col>
                </el-row>



            </el-main>

效果:

问题在哪?如何正确配置?

回复
阅读 444
2 个回答
✓ 已被采纳

iframe 有自己的高度吧。默认是 300 ? 还是 150。我忘了。

iframe = document.createElement('iframe')
iframe.src = '//www.lilnong.top'
document.body.appendChild(iframe)

300*150 那么他就这么高。你可以给他设置一个 100vh 就会更高。如果不跨域的话,你能在onload之后拿到高度,重新赋值,但是因为你这个跨域,所以没办法

image.png

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
你知道吗?

宣传栏