以下是在向下滚动时从DB获取更多内容的代码段。它主要是JQuery。
我不明白为什么当高度变为100px时它会起作用,但当高度为100%或自动时它不起作用。
<div id="contentBox" style="overflow: scroll;width: 200px; height: 100px;">
<div id="actualContent">
<p>
<span>2</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero.
</p>
<p>
<span>3</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero.
</p>
</div>
</div>
$("#contentBox").scroll(function(){
if($("#contentBox").scrollTop() >= ($("#actualContent").height() - $("#contentBox").height())){
alert("Hi");
}
});
以下是链接:https://jsfiddle.net/8qv2ch9u/
如何在没有高度100px的情况下使其工作,但内容填充浏览器的大小?
答案 0 :(得分:4)
使用.<that_class_name>
,元素确切地知道它需要做什么。
使用height: 100px
,元素需要知道:百分比是什么?
对于百分比高度,您需要提供参考框架。这是通过指定父级的高度来完成的。如果height: 100%
的父亲也是一个百分比,那么祖父母也需要一个明确的高度。
基本上,如果您要使用百分比高度,则需要指定所有父元素的高度,包括根元素:
#contentBox
https://jsfiddle.net/8qv2ch9u/3/
以下是规范中的相关部分:
W3C
height
property definition:百分比
指定百分比高度。百分比是根据生成的框的高度计算的 包含块。如果包含块的高度不是 明确指定并且此元素未绝对定位,该值计算为“auto”。自动
高度取决于其他属性的值。
另见:
答案 1 :(得分:1)
正如迈克尔所指出的,你可以设置body
高度,点是设置元素的高度百分比,它必须有一个父元素,它将从中获得百分比高度。或者尝试另一个div(父元素)中的整个代码,并为父元素设置像素的高度,然后可以将子元素的高度设置为父元素的百分比。检查这个简单的片段。
.parent{width:50px;height:600px;}
.childone{width:100%;height:80%;background-color:red;}
.childtwo{width:100%;height:19%;background-color:green;}
<div class='parent'>
<div class='childone'>I have 80% height of my parent</div>
<div class='childtwo'>i have 19% height of my parent</div>
</div>
答案 2 :(得分:0)
只需将100px
更改为100vh
以获取视图高度,或将vw
更改为视图宽度。