CSS: Scroll in fixed div-Container

I'm trying to enable a working scroll bar on my page. The problem is that my div-container is fixed, because I have three relative divs that slice my background in three columns. I tried it with overflow-y but this has no effect on my div. It works just on the relative divs.

body, html {
     height: 100%;
     min-height: 100%;
     margin: 0;
     padding: 0;
}
.bg_left {
     background-color: #333C33;
     background-position: left;
     background-repeat: repeat;
     float: left;
     position: relative;
}
.bg_middle {
     background-color: #FFFFFF;
     background-repeat: repeat;
     float: left;
     position: relative;
}
.bg_right {
     background-color: #005050;
     background-repeat: repeat;
     float: left;
     position: relative;
}
.top {
     position: fixed;
     text-align:center;
}

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   </head>
   <body>
      <div class="bg_left" style="width: 33.3%; height: 100%"></div>
      <div class="bg_middle" style="width: 33%; height: 100%"></div>
      <div class="bg_right" style="width: 33%; height: 100%"></div>
      <div class="top" style="width: 100%; height: 100%">Test
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
         <br><br><br><br><br><br><br><br><br><br><br><br><br>
         test
      </div>
   </body>
</html>

Does anyone know how to enable the scroll bar or how to get rid of the relative background divs?

Solution

You should try a different approach, you want the background fixed in the left and the right, and the content inside.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body, html {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.bg_left {
background-color: #333C33;
background-position: left;
position: fixed;
left:0;
height: 100vh;
}
.bg_right {
background-color: #005050;
position: fixed;
right:0;
height: 100vh;
}
.top {
text-align:center;
}
</style>
</head>
<body>
<div class="bg_left" style="width: 33.3%; height: 100%"></div>
<div class="bg_right" style="width: 33.3%; height: 100%"></div>
<div class="top" style="width: 100%; height: 100%">Test
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
test</div>
</body>
</html>

This will work, although it's still probably not the best solution. But it all depends in the real need you have. But try this out.

Hope it helps!