一个非常高的 div 中的 HTML 内容

Question

我想创建一个具有非常非常大的可滚动内容区域的网页。

然而，一旦大小变得太大，浏览器似乎就会停止正确显示完整的内容区域。例如

<div id="scrollable">
  <div id="visCont">
    <img src="https://media.glamour.com/photos/5a0399bd8948116a5c05be65/master/w_644,c_limit/kaley-cuoco-the-big-bang-theory-penny-season-11-2017.jpg"> </img>
  </div>
  <div id="invisibleContent">
    <p>
    text
    </p>
  </div>
</div>

#scrollable {
  overflow-y:auto;
}

#visCont {
   top: 6710000px;
  position:absolute;
}

#invisibleContent {
  top: 6720000px;
  position:absolute;
}

在这里，如果您一直滚动到底部，您将看到图像和文本在 div 底部正常显示:

https://jsfiddle.net/L7c8bmpm/11/

但是这里因为内容离顶部太远，Chrome 中的文本被截断了，你甚至看不到底部的白色 div 背景。在 IE 中，似乎没有显示文本，图像位于最底部。

https://jsfiddle.net/ww5yu6nh/10/

有办法解决这个问题吗？或者这只是目前大多数网络浏览器的限制，因为预计不会有人需要这么高的 div？

Answer 1

它应该都可以正常渲染，并且在我的浏览器 (Chrome v65) 中我可以很好地看到这两个元素，但我认为您的方法是错误的。
id 为 scrollable 的父 div 的 height 为 0。因为其中的元素定位在 absolute 它们会收到自己的 stacking context并且父 div 崩溃了。您当前看到的滚动条实际上​​在 body 上。

更好的方法是这样的:

#scrollable {
    height: 6720000px;
    position: relative;
}
#visCont {
    bottom: 1000px;
    position: absolute;
}
#invisibleContent {
    bottom: 0px;
    position: absolute;
}

https://jsfiddle.net/afe6odw3/1/

滚动条仍在 body 上，但您的父 div 现在确实具有实际高度。