Renommer : colonnes div fixes et largeur restante

Question

J'essaie de créer une disposition à 5 colonnes où toutes les colonnes font toute la hauteur de la fenêtre du navigateur.

À l'exception de la colonne du milieu, les autres colonnes doivent être fixes et ne pas bouger lorsque le navigateur/document défile.

La colonne du milieu contiendra le contenu du site Web et débordera verticalement, elle devrait donc défiler comme d'habitude dans le navigateur.

En plus de cela, toutes les colonnes sauf la colonne du milieu ont une largeur fixe et j'ai besoin que la colonne du milieu occupe l'espace restant (100 % de la largeur de l'élément parent)

Une exigence est de ne pas utiliser flexbox ou css-grid.

Le code ci-dessous est ce que j'ai obtenu. L'ajout de la colonne "c" gâche même toute la hauteur de toutes les colonnes et ajoute des marges supérieure/inférieure. Je suis perdu ici et j'apprécierais vraiment de l'aide.

*{
margin:0;
padding:0;
}
body,html{
    height:100%;
}
.parent{
  height:100%;
  width:100%;
}
.parent,.a,.b,.c,.d,.e{
    display:inline-block;
  height:100%;
}

.a{
    background-color:#99a4fa;
  width:10%;
}
.b{
    background-color:#5b6cfa;
  width:100px;
}
.c{
    background-color:#3847b8;
  width:20%; /* this should be remaining, not 20% */
}
.d{
    background-color:#1a299c;
  width:100px;
}
.e{
    background-color:#0d1c8d;
  width:10%;
}

<div class="parent">
  <div class="a">
    a<br/>locked
  </div>
  <div class="b">
    b<br/>locked
  </div>
  <div class="c">
    remaining width
    <br/>
    so all cols take up 100% width
    <Br/>
    of parent
    <br/><br/>
    only div that should scroll vertically with the page
  </div>
  <div class="d">
    d<br/>locked
  </div>
  <div class="e">
    e<br/>locked
  </div>
</div>

Answer 1

J'utilise la position collante et je fais couler la colonne du milieu avec le défilement

*{
margin:0;
padding:0;
}
body,html{
    height:100%;
}
.parent{
  height:100%;
  width:100%;
}
.parent,.a,.b,.c,.d,.e{
    display:inline-block;
  height:100%;
}

.a{
    background-color:#99a4fa;
  width:10%;
}
.b{
    background-color:#5b6cfa;
  width:100px;
}
.c{
    background-color:#3847b8;
  width:20%; /* this should be remaining, not 20% */
   position: sticky;
    top: 0px;
    height:auto;
}
.d{
    background-color:#1a299c;
  width:100px;
}
.e{
    background-color:#0d1c8d;
  width:10%;
}

<div class="parent">
  <div class="a">
    a<br/>locked
  </div>
  <div class="b">
    b<br/>locked
  </div>
  <div class="c">
    remaining width
    <br/>
    so all cols take up 100% width
    <Br/>
    of parent
    <br/><br/>
    only div that should scroll vertically with the page
  </div>
  <div class="d">
    d<br/>locked
  </div>
  <div class="e">
    e<br/>locked
  </div>
</div>

veux