Grid of divs that are size of viewport

Grid of divs that are size of viewport

I want to make a grid of divs that are the size of the viewport. Just to
set a few basic variables, lets say I want it to be 7 divs wide and 10
divs high.
Here is a code I have so far to set the div size:
function height() {
var height = $(window).height();
height = parseInt(height) + 'px';
$(".page").css('height',height);
}
$(document).ready(function() {
height();
$(window).bind('resize', height);
});
function width() {
var width = $(window).width();
width = parseInt(width) + 'px';
$(".page").css('width',width);
}
$(document).ready(function() {
width();
$(window).bind('width', width);
});
Right now I just have 2 divs that are stacked on top of each other. One is
red and one is black, just so I can see them. I want to be able to put
content inside the divs. I also made sure to put
body {
margin: 0px;
}
Later I am going to put some scrolling features with jQuery but for now I
just want a way to make the grid.