basti1012.bplaced.net

Hallo zusammen, ich hab ein Problem, dass ich nicht gelöst bekomme. Im oberen Bereich meiner Homepage befindet sich der Header mit Dropdown etc. Ein paar Pixel, darunter der Navigationsbereich und darunter der Footer-Bereich. Der Footer soll am Browser immer ganz unten sein. Der Navigationsbereich kann unterschiedliche Höhen annehmen. Sobald der Navigationsbereich über eine Seite hinaus geht, läuft er in den Footer-Bereich. Ich bekomme es einfach nicht hin, dass der Navigations- und Footer-Bereich voneinander getrennt bleiben.

Code

                                    
                                
<style>
  
  #wrapper{
  display:flex;
  flex-direction:column;
}

#maindiv{
  width:100%;
  min-height:20px;
 display:flex;
}
#navigation{
    flex:1;
    height:500px;
    background-color:blue;
}
#mainpage{
   flex:4;
    background-color:maroon;
}

#footer{
    display:flex;
    min-height:30px;
    bottom:0px;
}
#footerleft{
 flex:1;
}
#footermiddle{
  flex:3;  
}
#footerright{
 flex:1;  
}
#footerright img{
    width:30px;
    height:30px;
    display:block;
    margin: 0px auto auto;
}
</style>
<div id="wrapper">
  
<div id="maindiv">
    <div id="navigation">
    </div>
    <div id="mainpage">
    </div>
</div>
  
<!-- Main Bereich Ende -->

<!--Footer Anfang -->
<div id="footer">
    <div id="footerleft">
    <h2>Letzte Änderung 20.05.2018 </h2>
    </div>
    <div id="footermiddle">
        <h2>Copyright © 2018 xxx - Alle Rechte vorbehalten</h2>
    </div>
    <div id="footerright">
linlk
    </div>
</div>
</div>