html - 固定 Div 在整个屏幕上的拉伸(stretch)，需要每个占据水平空间的百分比

Question

我有 3 个主 div，它们应该水平分割屏幕(屏幕宽度的 45%、10% 和 45%)。最左边的 div(blue) 包含许多需要保持静态的较小的 div(aqua)。中间(绿色)和最右边(红色)的 div 应该在用户滚动时向下 float 页面，但应该保持在水平位置。我为所有的 div 设置了固定的高度，因为它们将保持一定的垂直尺寸。

我尝试为绿色和红色 div 分配固定位置，但它们移出位置并挡住了蓝色 div。

CSS

.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}

HTML

<div class="MatchingDiv" style="width:100%">
            <div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
                Left-most Div
                <!--generate programmatically?-->
                <div class="PNMLB" id="rank1">Rank 1<br/></div>
                <br/>
                <div class="PNMLB" id="rank2">Rank 2<br/></div>
                <br/>
                <div class="PNMLB" id="rank3">Rank 3<br/></div>
                <br/>
                <div class="PNMLB" id="rank4">Rank 4<br/></div>
                <br/>
            </div>
            <div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;">Center Div</div>
            <div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;">Right-most Div</div>

Answer 1

请为最右边的 div 使用样式 position:fixed;right:0%; ，为中心 div 使用 position:fixed;right:45%;

工作代码片段如下:

<style>.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
</style>

<div class="MatchingDiv" style="width:100%">
            <div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
                Left-most Div
                <!--generate programmatically?-->
                <div class="PNMLB" id="rank1">Rank 1<br/></div>
                <br/>
                <div class="PNMLB" id="rank2">Rank 2<br/></div>
                <br/>
                <div class="PNMLB" id="rank3">Rank 3<br/></div>
                <br/>
                <div class="PNMLB" id="rank4">Rank 4<br/></div>
                <br/>
            </div>
            <div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;position:fixed;right:45%;">Center Div</div>
            <div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;position:fixed;right:0%">Right-most Div</div>