Help with div's

[Huwey]

I have a page that I'm working on that has 3 columns on it, the 2 on the outside are there to have a repeating animation running down the sides of the page where the middle div is for the writing on the page.

I thought I had what I wanted figured out where the outside divs would fill the screen top to bottom. However now that I have added more text to the page and some images I have noticed that the divs have stopped.

Here is what I currently have:


body {
background-color: #8A2BE2;
color: #eee;
text-align: center;
background-image: url(/images/aaa.gif);
background-size: cover;
}

.header{
background-color: #8A2BE2;
font-size:48px;
}
div{
float: left;
}
.left {
width: 20%;
height: 100vh;
background-image:url(/images/bbb.gif);
background-size: 100%;
}
.main {
width: 59%;
font-size:20px;
}
.right{
width: 20%;
height: 100vh;
background-image:url(/images/bbb.gif);
background-size: 100%;
}


The left and right divs go down approximately 1 page length however I am wanting it to go down as far as it needs to go to match the length of the main div. Is this possible?