修复了 Div 在整个屏幕上的拉伸，需要每个屏幕占据水平空间的百分比

Question

我有 3 个主要的div 应该水平分割屏幕(屏幕宽度的 45%、10% 和 45%(。最左边的div(blue( 包含许多需要保持静态的较小div(aqua(。当用户滚动时，中间(绿色(和最右边(红色(div 应该在页面中向下浮动，但应该保持在其水平位置。我已经为所有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

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

工作代码片段如下：

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

Answer 2

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

.Middle, .right{
position: fixed;
}
.Middle{
left: 45%;
}
.right{
left: 55%;
}

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

Answer 3

所以我为你上面提供的代码做了一个JSFiddle。

我从我们应该修复的两个div 中删除了所有float: left;，并为它们添加了position: fixed; top: 0;。

由于这会将它们全部重叠在左侧，因此我将红色中间一个left: 45%，将蓝色的移动到right: 0;。

我想这就是你要找的功能。

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

https://jsfiddle.net/deubwma6/6/