Flexbox 100% 高度背景问题

【问题标题】：Flexbox 100% Height Background IssueFlexbox 100% 高度背景问题
【发布时间】：2018-05-14 14:42:47
【问题描述】：

我创建了一个 2 列布局，它应该填充 100% 的高度并根据需要发挥作用，但在 Chrome / Safari 上，如果内容扩展超出浏览器高度，则右列的背景在滚动时会被切断：

我终其一生都无法弄清楚如何解决这个问题，任何见解都值得赞赏。

【问题讨论】：

【解决方案1】：

好的所以你的问题是这个div

<div class="row h-100">
  //Content
</div>

你已经应用了 height: 100%;导致问题的原因是您的左右列高度固定为窗口高度。

所以如果你删除你的 h-100 类它会正常工作。

【讨论】：

删除该类确实会解决背景问题，但随后列会失去其垂直高度。这个想法是右栏总是会拉伸窗口的整个高度。
我能够根据您的建议找到解决方案。删除类并添加以下内容： .container-fluid > .row { min-height: 100vw;高度：自动； }