很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算。
比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化;
再比如说,当我们引用一个ant Table组件,并且动态传入columns及dataSource时,由于需要控制sroll值我们需要获得动态的width和height;
......
下面我们举几个栗子
例1:使用antd layout布局,如下图,content宽高会随着窗口变化,我们希望iframe-component组件也随之变化,以至于iframe高度超出时iframe显示滚动条,该怎么写呢?
我们知道layout是flex布局,所以即使我们用下面的css也不能实现需求,因为content没有宽高,他的子元素使用height:100%起不到作用。
.iframe-component{
width:100%;
height:100%;
}
.iframe{
width:100%;
height:calc(100% - 30px);
}
怎么办呢?我们可以使用vh单位给iframe-component设置宽高。这样i