I am trying to write my responsive webpage without jQuery. But I meet two problems. 1. When the scroll bar appears, as I zoom in the window, the left line cannot automatically redraw. 2. Content cannot display everything, see bottom of picture. These two problems are noted below the snapshot. For details, follow the LINK link, thank you. 
I want to upload a snapshot, but I failed due to less than 10 reputations. Therefore, please visit my personal page to see the snapshot. Thanks again.
My code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> </title> <style type="text/css"> body { margin:0px; padding:0px; border:0px; display:block; z-index:-9999; width:100%; height:100%; left:0px; top:0px; overflow:auto; font-family: Arial,Helvetica,sans-serif; } div.bg { background-color:#fefefe; position:absolute; left:0px; top:0px; width:100%; height:100%; display:block; z-index:-8888; } </style> <script language="javascript" type="text/javascript"> var sw = 0, sh = 0; var b = true; function alignImg() { if (b) { document.getElementById("bot").style.top = (sh-40)+"px"; document.getElementById("rig").style.left = (sw - 40) + "px"; document.getElementById("debug").innerHTML = "sw: " + sw + " sh:" + sh + " f:" + b; } if (!b) { document.getElementById("bot").style.top = "66px"; document.getElementById("rig").style.left = "66px"; document.getElementById("debug").innerHTML = " reed.xia@gmail "; } b = !b; } (function (d) { setInterval(function () { w = d.body.clientWidth; h = d.body.clientHeight || window.innerHeight; document.title = w + " : " + h; document.getElementById("bot").style.top = (sh-40)+"px"; document.getElementById("rig").style.left = (sw-40)+"px"; document.getElementById("cn").style.top = 300+"px"; document.getElementById("cn").style.left = (sw - 112) / 2 + "px"; document.getElementById("en").style.top = 500 + "px"; document.getElementById("en").style.left = (sw-178)/2+"px"; document.getElementById("pig").style.left = (sw - 210) / 2 + "px"; document.getElementById("menu").style.left = (sw - 220) / 2 + "px"; document.getElementById("debug").style.left = (sw - 146) / 2 + "px"; if (sw !== w || sh !== h) { sw = w; sh = h; } }, 1); })(document) </script> </head> <body id="body" > <div class="bg" > <div> <a href="#" ><img src="images/circle-ydall.png" alt="circle-ydall" style="position:absolute;top:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> <a href="#" ><img src="images/circle-wedall.png" alt="circle-wedall" style="position:absolute;top:0px;right:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> <a href="#" ><img src="images/circle-yedall.png" alt="circle-yedall" style="position:fixed;bottom:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a> <div id="menu" style="position:absolute;top:10px;left:40px;height:40px;z-index:-3333;"> <a href="#" ><img src="images/ydall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> <a href="#" ><img src="images/wedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> <a href="#" ><img src="images/yedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a> </div> <div id="pig" style="position:absolute;top:80px;left:100px;height:180px;z-index:-3333;"> <img src="images/bigAllIn1.png" alt="bigAllIn1" style="height:180px;z-index:-3333;background-color:#909090;"/> </div> </div> <div id="cn" style="position:absolute;top:41px;left:41px;z-index:-6666;background-color:#e0e0e0;" > <h4 style="color:#606060">欢迎来到云道！</h4> <h4 style="color:#606060">属于您的逼格！</h4> <a href="http://www.ycpai.com/p_21104">进入</a> </div> <img id="row" src="images/row.png" alt="seperate row" style="position:absolute;top:40px;width:100%;height:1px;z-index:-5555;" /> <img id="col" src="images/column.png" alt="seperate column" style="position:absolute;left:40px;width:1px;height:100%;z-index:-5555;" /> <img id="bot" src="images/row.png" alt="seperate row" style="position:fixed;top:215px;width:100%;height:1px;z-index:-5555;" /> <img id="rig" src="images/column.png" alt="seperate column" style="position:fixed;left:215px;width:1px;height:100%;z-index:-5555;" /> <div id="en" style="position:absolute;top:157px;left:17px;z-index:-6666;background-color:#b0b0b0;" > <h4 style="color:#606060">Welcome to YDall.com!</h4> <h4 style="color:#606060">Awesome only for you!</h4> <a href="http://www.ycpai.com/p_21104">Enter</a> </div> <div style="position:fixed;bottom:0px;right:0px;height:40px;z-index:-6666;display:block;background-color:#b0b0b0;"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <p id="debug" style="position:fixed;bottom:0px;left:60px;z-index:-2222;background-color:#909090;" > reed.xia@gmail.com </p> </div> <a href="#" onclick="alignImg()"><img src="images/favicon200x200.png" alt="favicon200x200" style="position:fixed;width:40px;height:40px;bottom:0px;right:0px;z-index:-3333;background-color:#909090;" /></a> </body> </html>
source share