Why does my code work with height:100px, but not 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?

Because if the height is 100% or auto then it's by definition at least as high as its contents. Add `html, body { height:100% }` to your CSS. — JJJ, Jan 31 '16 at 00:51
How to make it work without height 100px, but the content filling the size of the browser? — sofs1, Jan 31 '16 at 00:53

score 4 · Accepted Answer · edited May 23 '17 at 11:45

4

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

edited May 23 '17 at 11:45

Community

1
1

answered Jan 31 '16 at 00:56

Michael Benjamin

346,931
104
581
701

The jsfiddle you provided is wrong answer. I want the content to be on full browser. It still has height as 100px and when I remove 100px for ContentBox, it doesn't work. – sofs1 Jan 31 '16 at 01:04
Ah, you revised your question while I was preparing my answer. I've revised my answer, as well. Cheers! – Michael Benjamin Jan 31 '16 at 01:59
What do you want to happen to content that overflows the container? Or is the container just supposed to expand as necessary? – Michael Benjamin Jan 31 '16 at 03:16
I want it to be like Quora home page after you login. I want the overflowing content to be shown. – sofs1 Jan 31 '16 at 03:29
Why not just remove all `height` rules, allowing the height to always be based on content size? https://jsfiddle.net/8qv2ch9u/4/ – Michael Benjamin Jan 31 '16 at 03:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/102116/discussion-between-user3705478-and-michael-b). – sofs1 Jan 31 '16 at 03:36

score 1 · Answer 2 · answered Jan 31 '16 at 03:00

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>

score 0 · Answer 3 · answered Jan 31 '16 at 01:07

0

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

answered Jan 31 '16 at 01:07

kzhao14

2,470
14
21

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

3 Answers3