Umbenennung: feste Div-Spalten und verbleibende Breite

Question

Ich versuche ein 5-Spalten-Layout zu erstellen, bei dem alle Spalten die volle Höhe des Browserfensters haben.

Mit Ausnahme der mittleren Spalte sollten die anderen Spalten fixiert sein und sich nicht verschieben, wenn im Browser/Dokument gescrollt wird.

Die mittlere Spalte enthält den Website-Inhalt und wird vertikal überlaufen, sodass im Browser wie gewohnt gescrollt werden sollte.

Außerdem haben alle Spalten außer der mittleren Spalte eine feste Breite und ich benötige, dass die mittlere Spalte den verbleibenden Platz einnimmt (100 % Breite des übergeordneten Elements)

Eine Voraussetzung ist, weder Flexbox noch CSS-Grid zu verwenden.

Den folgenden Code habe ich erhalten. Durch das Hinzufügen der Spalte „c“ wird sogar die gesamte Höhe aller Spalten durcheinander gebracht und die oberen/unteren Ränder hinzugefügt. Ich bin hier verloren und würde mich wirklich über Hilfe freuen.

*{
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

i use position sticky and make the middle column flow with scroll

*{
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>

want