vertical block in HTML and CSS

I met a task: to create a vertical image (line of repetitive images) starting under a header of a page and ending at the bottom.
If the window size of the browser changes the line should still hit the end of the page and no vertical rollers should appear.

After spending a day I found a solution. Take a look at the vertical bar to the left:
HTML:

<div id="vertical"><div></div></div>

CSS:

body{
height: 100%;
}
div#vertical{
position: absolute;
top: 0px;
height: 100%;
width: 56px;
overflow: hidden;
}
div#vertical div{
background-image: url('/images/vertical_bg.gif');
background-repeat: repeat-y;
margin-top: 212px;
height: 100%;
}


Explanation.
Here I use two DIVs, one in another.
The first has a full-page height.
Inner DIV has a background image and shifted relatively to the parent one with a "margin-top" style parameter.
"overflow: hidden" parameter of the outer DIV cuts the outstanding edges of the inner DIV and the browser does not have a vertical scrolling.
This way it always fits the page heights and does not cover the header.

The outer DIV has an "absolute" positioning.
Of course, I should remember to reserve the space to the left for all elements on the page with a "margin-left" or a "left" CSS parameter.