HTML CSS Div Overflow & Position "fixed"
03:12 09 Apr 2015

I've got an issue with styling using CSS. I have a website which constists of 4 major areas and 1 overall area. I simplified the code and added a color code to each area to get a quicker overview, but the main areas with there css looks like this:

.madegamesDiv {
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  min-width: 1200px;
  height: 34px;
  background-color: #778013;
  border-bottom: 1px solid #39950E;
}
.allDiv {
  position: fixed;
  top: 35px;
  left: 0px;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 850px;
  background-color: #39950E;
  overflow: scroll;
}
.leftDiv {
  position: absolute;
  z-index: 1;
  height: 775px;
  float: left;
  width: 200px;
  overflow: hidden;
  position: fixed;
  padding: 5px;
  background-color: #FFFF00;
}
.topDiv {
  min-width: 1000px;
  position: fixed;
  left: 200px;
  top: 35px;
  height: 150px;
  overflow: hidden;
  background-color: #FF00FF;
}
.mainDiv {
  width: 100%;
  min-width: 800px;
  max-width: calc(100% - 500px);
  background-color: #FFFFFF;
  position: fixed;
  left: 50%;
  margin-left: calc((100% - 500px)/2*(-1));
  top: 160px;
  height: calc(100% - 180px - 27px);
  overflow: auto;
  border: 1px solid #225909;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 10px;
  background-color: #FF0000;
}




  

  

    

      
Menu Area

    

    

      

        
Top Area with logo and other stuff

      

      

        
Main Area

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

        
Here is a lot of text and content

The main area main is the area with the most content. It needs to be scrollable. But my problem is now, how could I realize, when the browser window is too small, that all areas are displayed correctly? I thought on making the overall area all scrollable with CSS overflow:auto; or overflow:scroll;. But this does not work. I think the problem is, that the other areas are position:fixed and so the overall area all does not recognize the size of the other areas. Hard to explain, I hope, you can understand, what I try to explain. Is there a way to display scrollbars, when the window is too small? Thanks in advance for your help. If some code is missing or something is unclear, please feel free to ask.

html css