Question

我的包装div包含一个理想情况下应该具有100％高度和宽度的背景图像。出于某种原因，在屏幕初始尺寸之后，当向下滚动页面时，该高度之后的任何内容都会变成空白区域。

<div>
  <i class="fas fa-square"></i> SAMPLE UNCHECKED
  <br/>
  <i class="fas fa-check-square"></i> SAMPLE CHECKED
  <br/>
  <br/>
  <input name="access_chk[]" value="1" class="access_chk" type="checkbox" id="cb1" checked>
  <label for="cb1">LABEL WITH CONTENT</label>
  <br/>
  <input name="access_chk[]" value="2" class="access_chk" type="checkbox" id="cb2" checked>
  <label for="cb2"></label>
  <br/>
  <input name="access_chk[]" value="3" class="access_chk" type="checkbox" id="cb3" >
  <label for="cb3"></label>
  <br/>
  <input name="access_chk[]" value="4" class="access_chk" type="checkbox" id="cb4" checked>
  <label  for="cb4"></label>
</div>

Answer 1

我认为您的问题是由height: 100%;和overflow: visible;组合引起的：您正在将高峰修正为100％（min-height: 100%在这种情况下不会做任何事情），但是溢出的内容仍然可见，但并不是你所说的“初始高度”的一部分。

作为解决方案，您可以height: 100%;移除min-height: 100%;并将overflow: visible;更改为overflow: auto;。

向下滚动页面时背景图像不是100％高度

1 个答案: