Question

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

然而，似乎一旦尺寸变得太大，浏览器就会停止正确显示完整的内容区域。 e.g。

av_frame_unref

如果你一直滚动到底部，你会看到图像和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/

滚动条仍在主体上，但您的父div现在确实有一个实际高度。

Answer 2

我已经编辑了你的代码试试这个这只是一个例子 note标签没有关闭

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    body, html {
    height: 100%;
}

.image{

     /* Full height */
    height: 100%; 
    width: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}


    </style>

</head>
<body>


    <img src="https://media.glamour.com/photos/5a0399bd8948116a5c05be65/master/w_644,c_limit/kaley-cuoco-the-big-bang-theory-penny-season-11-2017.jpg" class="image">


    <p>
    text
    </p>





</body>
</html>

一个非常高的div里面的HTML内容

2 个答案: