<body style="width:100%;height:100%;margin:0;padding:0;"> <div id="004" style="float:left;position:absolute;width:100%;height:200px;background:green;bottom:0px;margin:0;padding:0;">aaa </div> <div id="001" style="float:left;position:absolute;width:100%;height:100%;bottom:200px;margin:0;padding:0;"> <div id="002" style="float:left;width:200px;background-color:blue;height:100%;margin:0;padding:0;">bbb</div> <div id="003" style="background-color:red;height:100%;margin-left:200px;margin:0;padding:0;">ccc</div> </div> </body> HTML: DIV001 AND DIV004 are parent div, DIV002 AND DIV003 are child div of DIV001. I want body: height 100%,width 100%; DIV004 fix on the bottom, height 200px,width 100%; DIV001 width 100%, heght 100%-200px, DIV002 width 200px,height 100% of DIV001, DIV003 width 100%-200px of DIV001,height 100% of DIV001. how to calculate the div width and height? Thanks.
Read the DOM element properties scrollWidth and scrollHeight. If you only want the viewable area, use clientWidth and clientHeight. <html> <head> <script type='text/javascript'> function showDims() { mydiv = document.getElementById('003'); alert(mydiv.scrollWidth+'x'+mydiv.scrollHeight); } </script> </head> <body onload='showDims()'> ... HTML:
Great, I add your code into my code, it can work as my will. but when I add <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> in top of the code, the height of DIV001 will be raise 200px, and the 200px part out of the top side. How to write it standard? Thanks again.