调整窗口高度时如何防止内容被顶部header遮挡

你当前的布局使用固定高度height: calc(100vh - 68px)限制左右容器高度，当窗口高度缩小到小于左侧文本+按钮的总高度时，内容会溢出容器，如果你给左侧容器设置了垂直居中属性，内容就会向上偏移被导航栏遮挡。

按如下步骤修改CSS即可：

1. 先清空全局默认边距，避免布局偏移：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 给.row容器添加flex布局，用最小高度替代固定高度：

.row {
  display: flex;
  /* 最小高度占满导航栏外的剩余视口，高度不足时自动撑开 */
  min-height: calc(100vh - 68px);
}

3. 修改左右容器的高度逻辑，给左侧内容添加防遮挡配置：

.row .flex__left, .row .flex__right {
    color: white;
    width: 50%;
    /* 继承row的最小高度规则 */
    min-height: inherit;
}

.row .flex__left {
  /* 给内容添加上下内边距，避免贴边 */
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 高度不足时内部滚动，不会溢出到导航栏下方 */
  overflow-y: auto;
  /* 按你的内容实际总高度调整该值，保证内容不会被过度挤压 */
  min-height: 320px;
}

.row .flex__right {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(i put image here);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

• 窗口高度足够时，左右板块依旧各占一半、满屏显示
• 窗口高度缩小时，内容触碰到导航栏底部后就会停止上移，容器随内容高度自动撑开
• 若窗口高度极小，左侧内容会出现内部滚动条，不会被导航栏遮挡

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