Probleme header vertical

Bonjour

J'ai fait un header vertical (ne vous soucier pas de l'état du code c'est une poubelle pour l'instant) avec 3 partie : haut (logo) bas (footer) et milieu (menu) et je voudrais que le footer reste toujours en bas le haut en haut et le menu pile au milieu.

Peut importe si vous utiliser flex ou absolute tant que sa marche mais je veux que si la hauteur est trop petite, le menu ne se rétrécisse pas (car j'ai un plugin de scrollbar jquery)

je vous laisse les bout de code en espérant trouver une solution !

merci

  <header>
        <div class="anim">
        <!-- Header PC -->

        <div class="mobile">
            <button class="hamburger">&#9776;</button>
            <button class="hamburgerclose">&#9776;</button>
            <img class="hide" src="images/logoweb.png" alt="logo">
        </div>

       <div class="top">       
        <img src="images/logo.png" alt="logo">
        <p id="dot1">&#9679 &#9679 &#9679 &#9679</p>
      </div>

        <ul id="headerid">
           <section>
            <li><a href="accueil.html" id="active">Accueil</a></li>
            <hr noshade="noshade">
            <li><a href="Presentation.html">A Propos</a></li>
            <hr noshade="noshade">
            <li><a href="entreprise.html">Nos Entreprises</a></li>
            <hr noshade="noshade">
            <li><a href="actualite.html">Actualites</a></li>
            <hr noshade="noshade">
            <li><a href="Contact.html">Contact</a></li>
            </section>
        </ul>

       

       <!-- Footer PC -->
       
        <div id="footer">
           
           <section>
            <p id="dot2">&#9679 &#9679 &#9679 &#9679</p>
            <h3>Nous suivre</h3>
            <p>Saintes
                <br>1 Rue Du DR Marie-François Bichat
                <br>05 46 93 59 84</p>
            <p>Pons
                <br>3 Rue des Catalpas
                <br>05 46 91 33 09</p>

            <div class="trait"></div>

            <div>
                <span>
            <img src="icones/facebook.png" alt="facebook">
            </span>
                <span>
            <img src="icones/social.png" alt="mail">
            </span>
                <span>
            <img src="icones/linkedin.png" alt="linkedIn">
            </span>
            </div>

            <div class="trait"></div>

            <article>&#169 2017, AGT GEOMETRE - TOUS DROITS RESERVES | <span>Psyko</span></article>
            </section>
        </div>
      </div>
    </header>

*{
    padding: 0;
    margin: 0;
}

@font-face{
    font-family: 'bebas';
    src: url('polices/BEBAS.TTF');
}

@font-face{
    font-family: 'InfiniteStroke';
    src: url('../polices/Infinite_Stroke.otf');
}

@font-face{
    font-family: 'bebas neue';
    src: url('../polices/BebasNeue.otf');
    src: url('../polices/BebasNeue.ttf');
}

@font-face{
    font-family: 'steelfish';
    src: url('../polices/steelfish rg.ttf');
}

main{
    float: right;
    width: 80%;
    height: 100vh;
    overflow: auto;
}

.mobile{
    display: none;
}

header{
    width: 20%;
    position: relative;
    float: left;
    height: 100vh;
    position: fixed;
    overflow: auto;
    background-color: #070f13;
}

#headerid li #active{
    color: white;
}

header img{
    display: block;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    vertical-align: top;
}

header p{
    color: #8e9599; 
    font-size: 10px;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

#dot2{
    color: #8e9599; 
    font-size: 10px;
    text-align: center;
    display: block;
    padding-bottom: 15px;
    letter-spacing: 0px;
}

#headerid hr{
    width: 10%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    color: #8e9599;
    height: 0px;
    
    -webkit-transition: all 1s ease;
}

header ul li:hover+hr{  
    transform: scaleX(2.75);
}

#headerid li a{
    color: #8e9599;
    text-decoration: none;
    list-style: none;
    font-family: 'bebas';
    font-size: 28px;
    text-align: center;
    display: block;
    width: 100%;
    
    -webkit-transition: color 1s linear;
}

#headerid li{
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    text-align: center;
    display: block;
    
}

#headerid li:hover a{
    color: white;
}

#headerid{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 22px;
}

#footer img{
    display: inline-block;
    width: 15%;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px dotted grey;
    border-radius: 50%;
    padding: 5px;
    
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

#footer img:hover{
    -webkit-transition: 1s;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}

#footer div{
    text-align: center;
}

#footer article{
    color: #333333;
    font-family: 'bebas';
    font-size: 11px;
    text-align: center;
    margin-top: 4px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

#footer article span{
    color: #333333;
    font-family: 'InfiniteStroke';
    font-size: 15px;
}

#footer p{
    font-family: "bebas neue";
    font-size: 12px; 
    margin-bottom: 10px;
    color: #333333;
    letter-spacing: 2px;
    width: 80%;
    margin-left: auto;
    margin-right:auto;
    text-align: center;
    -webkit-transition: color 1s linear;
}

#footer p:hover{
    color: white;
}

#footer h3{
    color: #333333;
    font-family: 'bebas';
    font-size: 12px;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 10px;
    font-weight: normal;
    text-decoration: underline;   
}

Bonjour,

Voici une piste :

<div class="content">
  <div class="top">
    <p>top</p>
  </div>
  <div class="middle">
    <div class="inner">
      <p>middle</p>
    </div>
  </div>
  <div class="bottom">
    <p>bottom</p>
  </div>
</div>

<style>
  .content{
    position: relative;
    height: 100%;
  }
  .top{
    position: absolute;
    top: 0;
    left: 0
  }
  .middle{
    position: relative;
    height: 100%;
    display: table;
    top: 0;
    left: 0;
  }
  .middle .inner{
    display: table-cell;
    vertical-align: middle;
    height: 100%;
  }
  .bottom{
    position: absolute;
    bottom: 0;
    left: 0
  }
</style>