Заполнить видовое окно с квадратами

Question

Я пытаюсь получить размеры видового экрана, а затем заполнить его квадратами, чтобы они идеально охватывали весь видовой экран. Должен быть лучший способ, чем мой текущий код (ниже). Возможно, есть способ найти легко делимое число для знаменателя этой строки var boxWidthHeight = wrapperArea/30000;?

$(document).ready(function() { 
    var wrapperWidth = $(window).width(); 
    var wrapperHeight = $(window).height(); 
    $('.wrapper').css('width', wrapperWidth); 
    $('.wrapper').css('height', wrapperHeight); 
    var wrapperArea = wrapperWidth * wrapperHeight; 
    var boxWidthHeight = wrapperArea/30000; 
    var boxWidthHeight = parseInt(boxWidthHeight); 
    var boxArea = boxWidthHeight * boxWidthHeight; 
    var boxCount = wrapperArea/boxArea; 
    for(var i = 0; i < boxCount; i++) { 
     $('.wrapper').append('<div class="box"></div>'); 
    } 
    $(".box").css({ width: boxWidthHeight, height: boxWidthHeight }); 
}); 

Answer 1

http://jsfiddle.net/iambriansreed/nwPy5/

JavaScript

$(function() { 

    var box_size = 20, 
     wrapper = $('.wrapper'), 
     x = Math.round(wrapper.width()/box_size) + 
     (wrapper.width()%box_size ? 1 : 0), 
     y = Math.round(wrapper.height()/box_size) + 
     (wrapper.height()%box_size ? 1 : 0), 
     html = ''; 

    for(var i = 0; i <= x*y; i++) 
     html += '<div class="box"></div>'; 

    wrapper.hide().html('<div class="inner">'+html+'</div>'); 

    $('.inner', wrapper).css({'width' : x*box_size , 'height' : y*box_size , 'overflow': 'visible'}); 

    $('.box', wrapper).css({ 
     'background': '#ccc', 
     'width': box_size - 2, 
     'height': box_size - 2, 
     'border': '#fff solid 1px', 
     'float':'left', 
     'clear': 'none' 
    }); 

    wrapper.show(); 

});​ 

HTML

<div class="wrapper"></div>​ 

CSS

.wrapper { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: #333; 
    overflow: hidden; 
}