H5 兼容底部地址栏、搜索栏

设置页面大小为100vh出现的问题

• 问题：100vh=当前视口可见高度 ，种情况下工具栏的高度是不包含在100vh里面的，所以设置高度为100vh在浏览器中打开会出现滚动条的问题或者页面被工具栏遮挡
• 解决方式：

calc(100vh - 75px) //ios可能不准确

• 或采用下面的100%替代

方式一：设置页面高度为100%

• 将vh换成100%会将底部地址栏的高度算进去，100%等同于window.innerHeight
• 注意需要将当前页面以及其所有上级容器都设置为100%

方式二：postcss-100vh-fix

• 需要postcss大于8

//npm install --save-dev postcss postcss-100vh-fix
module.exports = {
  plugins: [
	require('postcss-100vh-fix')
  ]
}

方式三：resize+window.innerHeight

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

//css
:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

方式四：height: -webkit-fill-available;

height: -webkit-fill-available; //注意可会造成页面内滚动组件无法滚动的问题