Html 固定Div'；s延伸到整个屏幕，每个都需要占用%的水平空间

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

我尝试为绿色和红色分区分配固定位置，但它们移动到了位置之外，挡住了蓝色分区

CSS

HTML

最左边的Div
排名1



排名2



排名3



排名4



中心分区
最右边的分区

如果您知道所有div的确切宽度，您可以使用CSS属性left将它们一个接一个地移动

.Middle, .right{
   position: fixed;
}

.Middle{
   left: 45%;
}

.right{
   left: 55%;
}

---

我个人为此使用jQuery，您可以更精确地获得元素和位置div的偏移量：）

因此我为上面提供的代码制作了一个JSFIDLE

我删除了所有的

float:left，来自我们应该固定的两个div，我添加了
位置：固定；排名：0

因为这会使它们在左侧重叠，所以我将红色中间的一个
向左移动：45%
而蓝色的一个
向右移动：0

我想这就是你想要的功能

如果你有任何问题，请告诉我

请使用样式
位置：固定；右：0%用于最右侧的div和
位置：固定；右：45%用于中心分区

工作代码片段如下所示：


.PNMLB{
高度：400px；
字体：斜体；
溢出y：滚动；
背景色：浅绿色；
边框样式：双；}
最左边的Div
排名1



排名2



排名3



排名4



中心分区
最右边的Div
<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>

.Middle, .right{
   position: fixed;
}

.Middle{
   left: 45%;
}

.right{
   left: 55%;
}