.my-page {     height: 100vh}
 
 

  
 

• 带有隐藏的地址栏
• 具有可见的地址栏

//首先获得视口高度并将其乘以1%以获得1vh单位的值 let vh = window.innerHeight * 0.01 // 然后，我们将——vh自定义属性中的值设置为文档的根  document.documentElement.style.setProperty('--vh', `${vh}px`) // 监听resize事件 视图大小发生变化就重新计算1vh的值  window.addEventListener('resize', () => {     // 执行与前面相同的脚本     let vh = window.innerHeight * 0.01     document.documentElement.style.setProperty('--vh', `${vh}px`) })

 

  

   

   

   

   

   

   

   

  
  
<div class="module">  <div class="module__item">20%</div>  <div class="module__item">40%</div>  <div class="module__item">60%</div>  <div class="module__item">80%</div>  <div class="module__item">100%</div></div>
 
 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  
body {  background-color: #333;}
.module {  height: 100vh; /* 不支持自定义属性时的回退操作*/  height: calc(var(--vh, 1vh) * 100);  margin: 0 auto;  max-width: 30%;}
.module__item {  align-items: center;  display: flex;  height: 20%;  justify-content: center;}
.module__item:nth-child(odd) {  background-color: #fff;  color: #F73859;}
.module__item:nth-child(even) {  background-color: #F73859;  color: #F1D08A;}
 

 

  

   

   

   

   

   

   

   

   

  
  

.my-page {     background-color: #ffffff;     min-height: 100vh;     min-height: -webkit-fill-available;     overflow-y: scroll;     padding-bottom: 50px; }
 
 

  
 

body {  /* Footer will be hidden on iOS Safari because of bottom panel */  height: 100vh;}

 

  

   

   

   

   

   

   

   

   

   

   

   

  
  
body {  height: 100vh;}
/* Avoid Chrome to see Safari hack */@supports (-webkit-touch-callout: none) {  body {    /* The hack for Safari */    height: -webkit-fill-available;  }}
 
 

  此方法不适用于部分高度，例如height: 90vh 或height: calc(100vh - 60px)。
 

 

  

   

   

   

  
  
.my-page {     height: 100dvh}
 
 

  
 
 

  可以在此了解更多的动态视口单元信息，如：dvw、dvh、dvi、dvb、dvmin 和 dvmax等。
 

-end-