zoukankan      html  css  js  c++  java
  • 怎么让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>
    

  • 相关阅读:
    jsp转向
    什么是 XDoclet?
    tomcat中的几点配置说明
    mysql5问题
    POJ 3734 Blocks
    POJ 2409 Let it Bead
    HDU 1171 Big Event in HDU
    POJ 3046 Ant Counting
    HDU 2082 找单词
    POJ 1286 Necklace of Beads
  • 原文地址:https://www.cnblogs.com/anjun-xy/p/14767582.html
Copyright © 2011-2022 走看看