タイトル変更: div 列と残りの幅を修正-PHP中国語ネットワークQ&A

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

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

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

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

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

以下のコードは私が得たものです。列「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% */ position: sticky; top: 0px; height:auto; } .d{ background-color:#1a299c; width:100px; } .e{ background-color:#0d1c8d; width:10%; }