为什么我的代码只能使用height：100px，但不能使用height：100％？

Question

Following is the piece of code that gets more content from DB when scrolled down. Its mainly JQuery.

I don't understand why it works when height is changed as 100px, but it doesn't work when height is given as 100% or auto.

<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");
     }
 });

Here is the link: https://jsfiddle.net/8qv2ch9u/

How to make it work without height 100px, but the content filling the size of the browser?

Answer 1

With height: 100px , the element knows exactly what it needs to do.

With height: 100% , the element needs to know: percentage of what?

For percentage heights, you need to provide a frame of reference. This is done by specifying the height of the parent. And if the parent of #contentBox is also a percentage, then the grandparent would need an explicit height, as well.

Basically, if you're going to use percentage heights, you need to specify the heights for all parent elements up to and including the root element:

html, body { height: 100%; }

https://jsfiddle.net/8qv2ch9u/3/

Here's the relevant section from the spec:

W3C height property definition :

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.

auto
The height depends on the values of other properties.

See also:

• Working with the CSS height property and percentage values

Answer 2

As pointed out by michael you can set body height, point is to set height of element in percentage it must have a parent element from whom it will be getting percentage height. Or try the whole code in another div(parent element) and set height in pixels for parent element, then height of child element can be set to percentage of parent element. Check this simple snippet.

 .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> 

Answer 3

只需将视图高度的100px更改为100vh ，将视图宽度的更改为vw 。