View Full Version : how can I measure the height of HTML

22 Sep 2009, 4:15 AM

Lets say that I have an HTML snippet, possibly one that includes a <head> and <body>. Is there a way to measure its height as it would appear in the browser, without actually showing it?


22 Sep 2009, 4:25 AM
That all depends on how it's styled. But also the width that it gets constrained to.

You could try creating a hidden div (hidden using class 'x-hide-offsets') which has its width set to


Then ask it for its scrollHeight

22 Sep 2009, 4:26 AM
Of course the <head> won't get processed if you do this. innerHTML ignores stuff in any <head> element.

Mike Robinson
23 Sep 2009, 11:17 AM
I have found that even this is un-reliable.

What you need to do, I think, is to "'solve' the problem by eliminating the need to solve it." Use layouts ... aggressively. Use layouts like "anchor" and "border" for everything.

If you try to do anything in terms of "pixels," your code will break when it does encounter a browser (or a screen resolution or what have you) that is "different from your own computer." But if you do everything by means of ExtJs layouts (and CSS styles), you push the responsibility for "getting it right" over to the user's own browser, which figures out "the right thing to do" at runtime, user-by-user.

Been there... 8-|

23 Sep 2009, 12:01 PM
Good advice. Most of the time, laying out Components using the well defined rules of the built in layout managers is the way to go.

Mike Robinson
23 Sep 2009, 12:20 PM
One of the best books I ever bought ... and darned if I can lay my hands on it right now ... is a CSS book, nice and glossy, that shows you how the various style elements work.

Give the browser the information that it needs to generate the appropriate layout at run time, on the user's machine. Between CSS styles and ExtJS layout-managers, you have all you could need.