Pesquisa sobre a altura dinâmica do terminal móvel

Sobre o layout dinâmico de altura do terminal móvel

Quando a página não usa o teclado virtual, você pode usar calc () para calcular a altura restante

// html
<div>
	<div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

// style
<style>
	.header {
    
    
		height: 10rem;
	}
	
	.content {
    
    
		height: calc(~"100vh - 10rem - 40px");
	}
	
	.footer {
    
    
		height: 40px;
	}
</style>

Quando a página usa o teclado virtual, se você ainda usa calc () para calcular a altura, a altura do conteúdo será comprimida pelo teclado virtual pop-up e você precisa usar px para definir a altura para resolver a situação em que o a altura do conteúdo está comprimida

// html
<div>
	<div class="header"></div>
    <div :style="{height: content}">
    	<input type="text"/>
    </div>
    <div class="footer"></div>
</div>

// js
<script>
    data() {
    
    
	    return {
    
    
       		content: "",// content高度
	    }
    },
	
	mounted() {
    
    
	    // 固定高度
	    let header = "10";
	    // 动态获取高度
	    let footer = document.getElementsByClassName("footer")[0];
	    footer = parseFloat(window.getComputedStyle(footer).height);
	    // 获取剩余高度
	    this.content = this.getHeight(header, footer);
    },

	methods: {
    
    
		// 计算剩余高度
		getHeight(remHeight = 0, pxHeight = 0) {
    
    
		    let gmax = parseFloat(document.body.style.fontSize);
		    let otherHeight = (remHeight * gmax) + pxHeight;
		    return `${
      
      document.documentElement.clientHeight - otherHeight}px`
		}
	}
	
</script>

// style
<style>
	.header {
    
    
		height: 10rem;
	}
	
	.footer {
    
    
		height: 40px;
	}
</style>