为什么我的HTML文件有时只能正确加载？

我想使用原始HTML/JavaScript制作一个小网页。这是我的HTML文件的整个当前内容：为什么我的HTML文件有时只能正确加载？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My website</title> 
     <style> 
     * { 
      margin: 0px; 
      padding: 0px; 
     } 

     div.banner-light { 
      background-color:#9090d0; 
      position: absolute; 
      left:0px; 
     } 

     div.banner-dark { 
      background-color:#8080e0; 
      position: absolute; 
      left:0px; 
     } 
     </style> 
    </head> 

    <body onload="javascript:onLoadBody()"> 

    <script> 
     function onLoadBody() { 
      var curHeight = 0; 
      for (var i = 1; i < 25; i++) { 
       document.getElementById("stat" + i.toString()).style.top = curHeight.toString() + "px"; 
       document.getElementById("stat" + i.toString()).style.width = (screen.availWidth * 0.15).toString() + "px"; 
       document.getElementById("stat" + i.toString()).style.height = ((window.innerHeight - curHeight)/(25 - i)).toString() + "px"; 

       curHeight += ((window.innerHeight - curHeight)/(25 - i)); 
      } 
     } 

     function clickDiv(id) { 
      document.getElementById("stat" + id).innerHTML = "Clicked"; 
     } 
    </script> 

    <div id='stat1' class="banner-light" onclick="javascript:clickDiv(1)"><center>1</center></div> 
    <div id='stat2' class="banner-dark" onclick="javascript:clickDiv(2)"><center>2</center></div> 
    <div id='stat3' class="banner-light" onclick="javascript:clickDiv(3)"><center>3</center></div> 
    <div id='stat4' class="banner-dark" onclick="javascript:clickDiv(4)"><center>4</center></div> 
    <div id='stat5' class="banner-light" onclick="javascript:clickDiv(5)"><center>5</center></div> 
    <div id='stat6' class="banner-dark" onclick="javascript:clickDiv(6)"><center>6</center></div> 
    <div id='stat7' class="banner-light" onclick="javascript:clickDiv(7)"><center>7</center></div> 
    <div id='stat8' class="banner-dark" onclick="javascript:clickDiv(8)"><center>8</center></div> 
    <div id='stat9' class="banner-light" onclick="javascript:clickDiv(9)"><center>9</center></div> 
    <div id='stat10' class="banner-dark" onclick="javascript:clickDiv(10)"><center>10</center></div> 
    <div id='stat11' class="banner-light" onclick="javascript:clickDiv(11)"><center>11</center></div> 
    <div id='stat12' class="banner-dark" onclick="javascript:clickDiv(12)"><center>12</center></div> 
    <div id='stat13' class="banner-light" onclick="javascript:clickDiv(13)"><center>13</center></div> 
    <div id='stat14' class="banner-dark" onclick="javascript:clickDiv(14)"><center>14</center></div> 
    <div id='stat15' class="banner-light" onclick="javascript:clickDiv(15)"><center>15</center></div> 
    <div id='stat16' class="banner-dark" onclick="javascript:clickDiv(16)"><center>16</center></div> 
    <div id='stat17' class="banner-light" onclick="javascript:clickDiv(17)"><center>17</center></div> 
    <div id='stat18' class="banner-dark" onclick="javascript:clickDiv(18)"><center>18</center></div> 
    <div id='stat19' class="banner-light" onclick="javascript:clickDiv(19)"><center>19</center></div> 
    <div id='stat20' class="banner-dark" onclick="javascript:clickDiv(20)"><center>20</center></div> 
    <div id='stat21' class="banner-light" onclick="javascript:clickDiv(21)"><center>21</center></div> 
    <div id='stat22' class="banner-dark" onclick="javascript:clickDiv(22)"><center>22</center></div> 
    <div id='stat23' class="banner-light" onclick="javascript:clickDiv(23)"><center>23</center></div> 
    <div id='stat24' class="banner-dark" onclick="javascript:clickDiv(24)"><center>24</center></div> 

    </body> 
</html>

奇怪的是，当我尝试在浏览器中查看此文件，它有时会加载正是我想要的 - 数字1到24下左侧的具有交替背景的页面。但是，大约有4次，所有的数字都会以一种表示错误的方式聚集在左上角（自己尝试）。

奇怪的是，你可以打开这个确切的文件10次，根本不需要编辑它，它只会在几个实例中正常工作。我甚至不认为这是可能的，但它肯定违背了我作为程序员所知道的一切。如果您知道任何可能导致此情况的信息，请让我知道。顺带提一句，请原谅我可能做得不好，因为我是相当新的，并教导我自己。

编辑：在解决了一些有关我的HTML，JS和CSS顺序的建议解决方案之后，我意识到我的上面的代码有多复杂：不是使用onload，而是将div的样式宽度和高度设置为百分比。谢谢大家！

来源

2013-04-13 user2226001

使用$（文件）。就绪（函数 – mozillanerd

你不应该去了解的东西，你做的方式。有元素绝对将它们放置在屏幕上，但它们实际上不占用空间。这就像把一个立方体扔在一杯水里。水位会上升。当立方体是“绝对的”时，它不会那么做。所以你必须使div相对，然后他们会按照你想要的方式堆叠在一起。

* { 
     margin: 0px; 
     padding: 0px; 
    } 
    div { 
     height: 20px; 
     position: relative; 
    } 
    div.banner-light { 
     background-color: #9090d0; 
     left: 0px; 
    } 
    div.banner-dark { 
     background-color: #8080e0; 
     left: 0px; 
    } 


    window.onload = function() { 


     var curHeight = window.innerHeight; 
     console.log(curHeight); 
     for (var i = 1; i < 25; i++) { 
      document.getElementById("stat" + i.toString()).style.width = (screen.availWidth * 0.15).toString() + "px"; 
      document.getElementById("stat" + i.toString()).style.height = (curHeight/(25 - 1)).toString() + "px"; 

     } 

    } 

    function clickDiv(id) { 
     document.getElementById("stat" + id).innerHTML = "Clicked"; 
    }

让你的div相对，只控制它们的宽度。

编辑 - 使高度适应屏幕的高度：

为了使div的高度，以适应屏幕高度，你有你的数学有点不对劲。你应该读取窗口的高度，然后除以24.

我已经适应了上述代码以及小提琴。

http://jsfiddle.net/djwave28/Ap4Sq/5/

请注意，你将不得不与人调整窗口的大小问题。字体大小也不适应。所以如果这个解决方案真的有用就取决于你。这里也是一个解决调整大小的小提琴。

拨弄调整大小：http://jsfiddle.net/djwave28/Ap4Sq/6/

还要注意的是，你可以得到的东西更智能给你的div类似的类。你可以添加更多的类而不仅仅是一个。即<div class="class1 class2 class3"></div>

，另一个甚至适应字体大小：http://jsfiddle.net/Ap4Sq/8/

来源

2013-04-13 02:28:42 Daniel

嗯，这个问题已经解决了这个问题，但我希望横幅伸展到用户屏幕的整个高度，而不是固定高度。在JS中更改高度会导致随机故障问题回来吧，我会更多一些。 – user2226001