重新的標題為：固定的div列和剩餘的寬度

Question

我正在嘗試建立一個5列佈局，其中所有列的高度都是瀏覽器視窗的全高度。

除了中間列之外，其他欄位應該是固定的，當捲動瀏覽器/文件時不會移動。

中間列將包含網站內容，並且會垂直溢出，所以在瀏覽器中應該像通常一樣滾動。

除此之外，除了中間列之外的所有列都有固定的寬度，我需要中間列佔據剩餘空間（父元素的100%寬度）

一個要求是不使用flexbox或css-grid。

下面的程式碼是我得到的。新增列“c”甚至會搞亂所有列的全高度，並添加上/下邊距。我在這裡迷失了，真的很感激一些幫助。

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