Javascript 如何填充浏览器'；使用矩形显示整个窗口/文档_Javascript

Javascript 如何填充浏览器'；使用矩形显示整个窗口/文档

javascript

Javascript 如何填充浏览器'；使用矩形显示整个窗口/文档,javascript,Javascript,我想用矩形填充整个窗口，无论窗口大小如何。如果矩形是250px宽，窗口是1000px宽，那么它应该是一行中的4个区域。我设法只占了一排。下面是代码 <!DOCTYPE HTML> <html> <head> <style> div { width: 250px; height: 150px; border:

我想用矩形填充整个窗口，无论窗口大小如何。如果矩形是250px宽，窗口是1000px宽，那么它应该是一行中的4个区域。我设法只占了一排。下面是代码

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            div {
                width: 250px;
                height: 150px;
                border: 1px solid black;
                border-collapse: collapse;
                display: block;
                position: fixed;
            }
        </style>
        <script>
            function ubaci_div() {
                var sto = 0;
                var ipsilon = "px";
                for (var x = 0; sto < window.innerWidth; x++) {
                    var cet = sto + ipsilon;
                    var divovi = document.createElement("DIV");
                    document.getElementById("body").appendChild(divovi);
                    document.getElementsByTagName("DIV")[x].setAttribute("id", "id1");
                    document.getElementsByTagName("DIV")[x].style.left = cet;
                    sto += 250;
                }
            }
        </script>
    </head>
    <body id="body">
        <p id="p" onclick="ubaci_div()">Klikni</p>
    </body>
</html>


div{
宽度：250px；
高度：150像素；
边框：1px纯黑；
边界塌陷：塌陷；
显示：块；
位置：固定；
}
函数ubaci_div（）{
var-sto=0；
var ipsilon=“px”；
对于（var x=0；sto

我想你是在要求这样的东西吧

函数ubaci\u div（）{
var i=0；
var h=窗内高度；
var num=（h/150）；
对于（i=0；i

像这样的东西
JSFiddle：

var矩形宽度=250；
var矩形高度=100；
var columnCount=Math.ceil（window.innerWidth/rectangleWidth）；
var rowCount=Math.ceil（window.innerHeight/rectangleHeight）；
console.log（列数、行数）
对于（var rowIndex=0；rowIndex}看起来他指的是文档。@jHilscher-我的评论就是基于这一点而写的。sir2注意：在for循环中将迭代器变量命名为“i”（for index，而不是“x”）是“常识”。+ID在html文档中应该是唯一的。如果窗口是1001px宽怎么办？有多少个250px的矩形应该放进去？实际上div的宽度是252px；确切地这是最简单的解决办法。谢谢
  function ubaci_div() {
    var i = 0;
    var h = window.innerHeight;
    var num = (h / 150);
    for (i = 0; i < num; i++) {
      alert(num);
      loop();
      var br = document.createElement('br');
    }
  }

  function loop() {
    var sto = 0;
    var ipsilon = "px";
    for (var x = 0; sto < window.innerWidth - 250; x++) {
      var cet = sto + ipsilon;
      var divovi = document.createElement("DIV");
      document.getElementById("body").appendChild(divovi);
      document.getElementsByTagName("DIV")[x].setAttribute("id", "id1");
      document.getElementsByTagName("DIV")[x].style.left = cet;
      sto += 250;
    }
  }