CODEWITHSUNDEEP
htmlcss
jedierikb
jedierikb

Reputation: 13109

overflow not working -- document height growing

I am confused as to why this small bit of html + css makes my $(document).height() huge. It seems the overflow container isn't completely working. Here is a jsbin showing the errant behavior: http://jsbin.com/omokin/1

<html>
<head>
<style>
#container {overflow:auto;height:500px;width:300px;}
#big {height:90000px;background-color: pink;}
</style>
</head>
<body>
<div id="container">
<div id="big">
</div>
<div style='visibility:hidden; position:absolute;'>x</div>
</div>
</body>
</html>

Upvotes: 0

Views: 105

Answers (5)

user1575013
user1575013

Reputation:

Try setting position: relative on the #container div. If you don't do that and your markup has structure you described, that absolutely positioned div will ignore any overflow property effects between itself and its containing block (which is root element in this case, because there are no positioned parents).

Upvotes: 0

Ashis Kumar
Ashis Kumar

Reputation: 6554

$(document).height() will be huge as you have a longer height of div#big (#big {height:90000px}).

As per the .height function, its takes the height of the document which is really huge.

You can have a look into this documentation

Upvotes: 1

Joshua
Joshua

Reputation: 1270

It's because you have put a div with a position:absolute in the container under the big div. You'll notice when you scroll down to the bottom of the page in your example the hidden div with x is there.

http://jsbin.com/omokin/6/

If you change the order slightly, then the position:absolute won't push the whole page down.

<div id="container">
  <div style='visibility:hidden; position:absolute;'>x</div>
<div id="big">
</div>
</div>

In other words you can't use an absolute position in the context you're using it. You'll need to either remove the absolute positioning or move that div above the big div.

Upvotes: 3

Johnny Li
Johnny Li

Reputation: 67

http://jsbin.com/omokin/8/edit

You want to set the hidden element's top property to 0 because if you look at the top property is being pushed by the big element.

Upvotes: 0

Hushme
Hushme

Reputation: 3144

its correct the #big height:90000px is in #container height:500px and you set #container overflow:auto. If you don't want the scroll make overflow auto to hidden

Upvotes: 0

Related Questions