Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.

Edit code and click me	Your Result (Some examples do not work in Google Chrome):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> body { background:yellow; } button { font-size:12px; margin:2px; } p { width:150px; border:1px red solid; } div { color:red; font-weight:bold; } </style> <script src="/scripts/jquery-1.4.js"></script> <script> $(document).ready(function(){ function showHeight(ele, h) { $("div").text("The height for the " + ele + " is " + h + "px."); } $("#getp").click(function () { showHeight("paragraph", $("p").height()); }); $("#getd").click(function () { showHeight("document", $(document).height()); }); $("#getw").click(function () { showHeight("window", $(window).height()); }); }); </script> </head> <body> <button id="getp">Get Paragraph Height</button> <button id="getd">Get Document Height</button> <button id="getw">Get Window Height</button> <div> </div> <p> Sample paragraph to test height </p> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself