短高度屏幕下height:100vh区块内容溢出响应式适配问题

问题1：sectionOne内容溢出是否和100vh设置有关 #

是的，这一现象就是你当前的样式配置直接导致的：

• height: 100vh会强制将#sectionOne的高度固定为当前设备的视口高度，完全不考虑内部内容的实际高度
• 配套的overflow: hidden会直接裁剪所有超出容器高度的内容，当屏幕高度较矮、内部内容高度超过视口高度时，超出部分自然无法查看

问题2：两个section都设100vh会不会冲突 #

不会产生冲突。
vh是相对于当前视口高度的单位，每个元素设置的100vh都是独立取当前视口的高度值计算，两个块级<section>默认是正常垂直流式排列的：第一个占满第一屏的视口高度，第二个会自动排在第一个的下方，同样占满第二屏的视口高度，只要你没有给html、body等父级元素设置死高度为100vh同时禁止滚动，两个section都能正常占满各自的100vh高度。

可选修复方案 #

如果要保留首屏默认占满一屏的效果，同时避免矮屏下内容被裁剪，可以做如下调整：

#sectionOne {
  /* 把固定高度改成最小高度，内容超限时容器会自动撑开 */
  min-height: 100vh;
  /* 移除overflow:hidden，或者换成overflow:auto让内容超限时可以在容器内滚动 */
  overflow: auto;
}

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