修复了 Div 在整个屏幕上的拉伸，需要每个占据水平的 % space

Question

我有 3 个主要 div 应该水平分割屏幕（屏幕宽度的 45%、10% 和 45%）。最左边的 div(blue) 包含一些较小的 divs(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

如果您知道所有 div 的确切宽度，您可以使用 CSS 属性向左

将它们向右移动一个接一个

.Middle, .right{
   position: fixed;
}

.Middle{
   left: 45%;
}

.right{
   left: 55%;
}

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

Answer 2

所以我为您上面提供的代码制作了一个 JSFiddle。

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

因为这会在左边重叠它们，所以我移动红色中间的 left: 45% 和蓝色的 right: 0;。

我认为这就是您正在寻找的功能。

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

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

Answer 3

请使用 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>

修复了 Div 在整个屏幕上的拉伸，需要每个占据水平的 % space

Fixed Div's stretching over entire screen, need each to occupy % of horizontal space

html

css

position

fixed