如何实现register类div动态适配高度：内容少占满视口，多则适配内容

你之前使用固定高度height: 100vh的写法会强制容器高度等于视口高度，内容超出时无法自适应，将属性替换为min-height即可实现需求：

@media screen and (min-width: 800px) {
  /* 父级背景容器同步设置最小高度，避免背景图显示不全 */
  .background_image {
    min-height: 100vh;
  }
  .register{
    min-height: 100vh; 
  }
}

原理解释 #

• min-height: 100vh 表示容器的最小高度为当前视口高度，当内部内容高度小于视口高度时，容器会自动撑满整个视口
• 当内部内容总高度超过视口高度时，容器高度会跟随内容自动扩展，不会出现内容溢出、被截断的问题
• 同步给父容器.background_image设置相同的最小高度，是为了保证背景图可以跟随容器高度同步拉伸，不会出现背景断层的情况

内容的提问来源于stack exchange，提问作者Lube