Как заполнить все окно/документ браузера прямоугольниками

Я хочу заполнить все окно прямоугольниками, независимо от того, какой размер окна он есть. например. Если прямоугольники имеют ширину 250 пикселей, а окно шириной 1000 пикселей, то это будет 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>

источник

2016-01-08 Vladimir Stankovic

выглядит он означает документ. – jHilscher

@jHilscher - мой комментарий был создан с учетом этого вопроса. Sir –

2 примечания: это «здравый смысл», чтобы назвать переменную итератора в for-loop «i» (для индекса, а не «x»). + Идентификаторы должны быть уникальными в html-документе. – jHilscher

Я думаю, вы просите что-то вроде этого?

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

источник

2016-01-08 19:54:58

Точно. Это самое простое решение. Благодаря! –

Что-то вроде этого?

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

источник

2016-01-08 20:24:25

Спасибо, Майкл! Он работает, и он яркий. –

Как заполнить все окно/документ браузера прямоугольниками

ответ

Смежные вопросы