- 技术:vue + typescript
- 思路:将“ body的高度 - 死值 ”得到高度,按需要分给目标元素即可。
- 例子:
h1 = '400px';//textarea 1初始高度
h2= '400px';//textarea 2初始高度
beforeMount() {
this.h1 = this.h2 = this.GetHeight() + 'px';//textArea高度
}
async mounted() {
let that = this as any;
window.onresize = () => {
this.h1 = this.h2 = 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;
}
【html 代码】
<textarea :style="{'margin-left': '10px','outline': 'none','height':h1+'px'}" placeholder="请输入内容"></textarea>
![](https://img2020.cnblogs.com/blog/1321961/202105/1321961-20210514103044992-242240104.png)