页面中已有内容,插入iframe,它的高度的计算方式:
- 使用js获取页面剩余高度,针对不同尺寸设备可以独立获取剩余高度,实现响应式。
- 使用flex布局的flex属性。
#main div
{
flex:1;
}
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
<!-- iframe -->
<div class="flex-1">
<iframe :src="iframeLink" frameborder="0" width="100%" height="100%"></iframe>
</div>
设置iframe的height为100%,然后给它的父盒子设置flex-1,注意需要将父盒子和所有其他的内容包裹在一个div内,给大div设置flex flex-col属性就ok。