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

Question

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>

效果：

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

Answer 1

初步判断是没有设置el-tabs__content的样式

代码：
https://codepen.io/linvic/pen...

---

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

Answer 2

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

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

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

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