• 怎么让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>
    

  • 相关阅读:
    元组类型内置方法
    python的两种编程模式
    Python和Python解释器
    异常处理
    文件的三种打开方式
    python解释器的安装
    编程语言的分类
    计算机基础之编程
    linux 安装postgresql
    CentOS7 部署 gitlab
  • 原文地址:https://www.cnblogs.com/anjun-xy/p/14767582.html
Copyright © 2020-2023  润新知