Element.scrollHeight: DOES NOT include padding for text area's, DOES include border for div's?




Layout: Form Controls
7 years ago
5 years ago


(Reporter: Aris, Unassigned)



Firefox Tracking Flags

(Not tracked)



(2 attachments)



7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv: Gecko/20100625 Firefox/3.6.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv: Gecko/20100625 Firefox/3.6.6

The property element.scrollHeight does not include padding of a text area, but for a div it includes both padding AND border. This is not according to the documentation at https://developer.mozilla.org/en/DOM/element.scrollHeight

Reproducible: Always

Steps to Reproduce:
1. Use a text area with padding.
2. Compute the scroll height.
Actual Results:  
Scroll height = height, but not including padding.

Expected Results:  
Scroll height should be height including padding.

For a div, the situation is again different: border seems to be included there as well.

Comment 1

7 years ago
Created attachment 456053 [details]
Scroll height examples for text area / div

Click the text area / div to view computed scroll height values.

Comment 2

7 years ago
I can see the same behaviour. scrollHeight includes height + padding + border.
clientHeight includes heigth + padding.

So, clientHeight is not the same as scrollHeight for non scrollable elements.

Opera behaves the same way as firefox, while webkit behaves the same way as described in the documentation.
I'll attach another testcase

Comment 3

7 years ago
Created attachment 498711 [details]
testcase: show difference between clientHeight and scrollHeight


7 years ago
Version: unspecified → 3.6 Branch
This behaviour also makes it impossible to ascertain whether or not overflow has occurred in a div, because even an empty div with a fixed height of, say, 123px will report a clientHeight of 123px but a scrollHeight of 123 + border-top + border-bottom, which is the only way to test whether or not overflow has occurred.

problem touches on what was filed at http://code.google.com/p/chromium/issues/detail?id=74999
Duplicate of this bug: 740670
Boris, could that be related to bug 157846?
Severity: major → normal
Component: General → Layout: Form Controls
Ever confirmed: true
OS: Windows 7 → All
Product: Firefox → Core
QA Contact: general → layout.form-controls
Hardware: x86 → All
Version: 3.6 Branch → Trunk
Better if I CC him...

Boris, could you look at comment 6? :)
Seems plausible, yes.  We really need a spec for form controls....
Depends on: 157846
See related: bug 735646. It has patches that change scrollHeight to not include the border. That should fix half of this bug (the div half, not the textarea half).
Oops, I meant bug 755971. That has landed on inbound now, but I'll leave this open since I'm not sure if there are other unresolved issues here.
You need to log in before you can comment on or make changes to this bug.