怎么让html表单元素自动充满浏览器窗口,并且自适应浏览器各种窗口大小?
作者:互联网
- 技术:vue + typescript
- 思路:将
( body的高度 - 死值 )
得到高度,按需要分给目标元素即可。 - 例子:
beforeMount() {
this.h1 = this.h2 = 'height:' + this.GetHeight() + 'px';//textArea高度 (h1和h2绑定给对应textarea)
}
async mounted() {
let that = this as any;
window.onresize = () => {
this.h1 = this.h2 = 'height:' + that.GetHeight()+ 'px';//调整浏览器大小时改变textArea高度
}
}
//textArea自适应页面高度
GetHeight() {
let p=30*3;//图中前3行元素高度(死值)
let nH = (document.body.clientHeight - p);
let h = nH / 2;
if (h < 130) {
h = 130;
} else if (h > 600) {
h = 600;
}
return h;
}
标签:窗口,textArea,h2,GetHeight,h1,高度,html,let,浏览器 来源: https://www.cnblogs.com/anjun-xy/p/14767582.html