CODEWITHSUNDEEP
javascriptjquerycsshtml
sofs1
sofs1

Reputation: 4176

Why does my code work with height:100px, but not height:100%?

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?

Upvotes: 1

Views: 80

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371321

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:

Upvotes: 4

bɪˈɡɪnə
bɪˈɡɪnə

Reputation: 1085

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>

Upvotes: 1

kzhao14
kzhao14

Reputation: 2630

Simply change 100px to 100vh for view height, or vw for view width.

Upvotes: 0

Related Questions