为什么我的代码适用于高度:100px,但不适用于高度:100%?

时间:2016-01-31 00:49:44

标签: javascript jquery html css html5

以下是在向下滚动时从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的情况下使其工作,但内容填充浏览器的大小?

3 个答案:

答案 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更改为视图宽度。