怎么让html表单元素自动充满浏览器窗口,并且自适应浏览器窗口变化?

  • 技术: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://www.cnblogs.com/anjun-xy/p/14767582.html