Help with auto adjustable div
Hello,
I need some help! I have a div box that sticks 10px away from the right and bottom edge of the browser window and auto adjusts itself when the browser is resized. It works perfectly, however, when the window is resized to it's smallest size either virtically or horrizontally, I get a js error. Here is the code. Can someone please help!
Code:<HTML> <HEAD> <TITLE>Example</TITLE> <script type="text/javascript" language="javascript"> <!-- function chk(){ //width setting my_div=document.getElementById("adjustBox") left_space=document.getElementById("adjustBox").offsetLeft right_space=10 my_div.style.width=document.body.clientWidth-left_space-right_space //height setting my_div=document.getElementById("adjustBox") top_space=document.getElementById("adjustBox").offsetTop bottom_space=10 my_div.style.height=document.body.clientHeight-top_space-bottom_space } onresize=chk onload=chk //--> </script> <style type="text/css"> <!-- body { overflow: hidden; } div#adjustBox { /*position:absolute; top: 0px; left: 0px;*/ padding:10px; width:100%; height:100%; overflow: auto; background-color:#ccc; overflow-x:auto; border:1px solid #000; } --> </style> </HEAD> <BODY> <div style="border:1px solid #517191; background-color:#6688A4; height:18px; width:100%;"> </div> <div id="adjustBox"> </div> </BODY> </HTML>
CSS Codes
Reply With Quote
Bookmarks