タイトル変更: div 列と残りの幅を修正

Question

すべての列がブラウザ ウィンドウの高さ全体になる 5 列のレイアウトを作成しようとしています。

中央の列を除いて、他の列は固定され、ブラウザ/ドキュメントがスクロールされたときに移動しないようにする必要があります。

中央の列には Web サイトのコンテンツが含まれており、垂直方向にオーバーフローするため、ブラウザーでは通常どおりスクロールする必要があります。

それに加えて、中央の列を除くすべての列の幅は固定されており、中央の列が残りのスペース (親要素の 100% の幅) を占める必要があります。

要件の 1 つは、フレックスボックスや CSS グリッドを使用しないことです。

以下のコードは私が得たものです。列「c」を追加すると、すべての列の高さが崩れ、上下の余白が追加されます。ここで道に迷ってしまったので、助けていただければ幸いです。

リーリー リーリー

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