CODEWITHSUNDEEP
javascriptjqueryresizewindow
James Kyle
James Kyle

Reputation: 4178

jQuery Height broken

Take a look at this:

http://jsfiddle.net/JamesKyle/3FaVN/

  1. Try resizing the result vertically: the two columns scroll correctly afterwards.

  2. Next resize horizontally, and then try resizing vertically again: notice how the columns are no longer equal to the viewport height and do not scroll correctly.

I do not understand what is happening here.

My javascript seems easy enough:

function setHeight() {
     $('.panel').height( $(window).height() );
}

$(window).load(setHeight).resize(setHeight);

​ Anyone know what is causing this? Any ideas how to fix it?

Upvotes: 1

Views: 120

Answers (5)

Claude
Claude

Reputation: 9980

There is a bug in webkit with display: table(-cell) and resizing, see https://bugs.webkit.org/show_bug.cgi?id=53166 .

I would stay far from display: table for now.

EDIT: after reading some more, I'm not sure this applies to your situation. To me though, after testing quite a bit, it does feel like a bug in webkit of some sorts (as in: it's broken, and after some element inspection, things seem to work again...)

Upvotes: 0

jcubic
jcubic

Reputation: 66540

Your event was fired by resize, just put console.log. I don't know why but this work http://jsfiddle.net/3FaVN/24/

Upvotes: 0

KRyan
KRyan

Reputation: 7598

jQuery works fine; .panel's height is set correctly. Its children, however, are not being set at all.

Upvotes: 0

Anoop
Anoop

Reputation: 23208

jQuery resize is working fine as height of 'div.panel' is correct. it is internal divs of 'div.panel' whose height is not proper. Setting children height will solve the problem modified jsfiddle

Upvotes: 0

Royce Feng
Royce Feng

Reputation: 1663

Use height: 100%; instead of height: inherit; on your .scroll divs

Upvotes: 1

Related Questions