Tajuk semula: lajur div tetap dan baki lebar

Question

Saya cuba membuat reka letak 5 lajur di mana semua lajur adalah ketinggian penuh tetingkap penyemak imbas.

Kecuali lajur tengah, lajur lain hendaklah dibetulkan dan tidak bergerak apabila pelayar/dokumen ditatal.

Lajur tengah akan mengandungi kandungan tapak web dan akan melimpah secara menegak, jadi ia harus menatal seperti biasa dalam penyemak imbas.

Selain itu, semua lajur kecuali lajur tengah mempunyai lebar tetap dan saya memerlukan lajur tengah untuk menduduki ruang yang tinggal (100% lebar elemen induk)

Satu keperluan adalah untuk tidak menggunakan flexbox atau css-grid.

Kod di bawah adalah yang saya dapat. Menambah lajur "c" malah mengacaukan ketinggian penuh semua lajur dan menambah margin atas/bawah. Saya tersesat di sini dan sangat menghargai bantuan.

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

saya menggunakan kedudukan melekit dan membuat lajur tengah mengalir dengan skrol

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

mahu