Question

我想用矩形填充整个窗口，无论它的大小是多少。例如。如果矩形宽250px，窗口宽1000px，则称为4 rec。在一排。我设法填补了一行。这是下面的代码

<!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>

Answer 1

我认为你要求这样的东西？

https://jsfiddle.net/DIRTY_SMITH/cfckvvzw/9/

  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;
    }
  }

Answer 2

这样的东西？

JSFiddle：https://jsfiddle.net/vc7w608m/

var rectangleWidth = 250;
var rectangleHeight = 100;
var columnCount = Math.ceil(window.innerWidth / rectangleWidth);
var rowCount =  Math.ceil(window.innerHeight / rectangleHeight);
console.log(columnCount, rowCount)
for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
  var rowDiv = document.createElement("div");
  rowDiv.style.height = rectangleHeight + "px";
  rowDiv.style["white-space"] = "nowrap";
  rowDiv.style["overflow"] = "hidden";
  document.body.appendChild(rowDiv);
  for (var columnIndex = 0; columnIndex < columnCount; columnIndex++) {
      var rectangle = document.createElement("div");
      rectangle.style.height = rectangleHeight + "px";
      rectangle.style.width = rectangleWidth + "px";
      rectangle.style.display = "inline-block";
      rectangle.style["background-color"] = "rgb(" + (Math.floor(Math.random()*256)) + ", " + (Math.floor(Math.random()*256)) + ", " + (Math.floor(Math.random()*256)) + ")";
      rowDiv.appendChild(rectangle);
    }
}

如何使用矩形填充浏览器的整个窗口/文档

2 个答案: