时间戳

首页 > 解决方案 > Flexbox 100% Height Background Issue

html - Flexbox 100% Height Background Issue

问题描述

I've created a 2 column layout that should fill 100% height and functions as desired, but on Chrome / Safari if the content expands beyond the browser height the background on the right column cuts off when scrolling:

http://codeply.com/view/yCE7TYvKkV

Screenshot of issue when scrolling enter image description here

I can't for the life of me figure out how to remedy this, any insight appreciated.

标签： htmlcssflexboxbootstrap-4

解决方案

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

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

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

因此，如果您删除 h-100 课程，它将正常工作。

推荐阅读