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

【问题标题】：Fixed Div's stretching over entire screen, need each to occupy % of horizontal space修复了 Div 在整个屏幕上的拉伸，需要每个占据 % 的水平空间
【发布时间】：2018-06-28 01:32:13
【问题描述】：

我有 3 个主 div 应该水平分割屏幕（屏幕宽度的 45%、10% 和 45%）。最左边的 div（蓝色）包含许多需要保持静态的较小的 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>

【问题讨论】：

标签： html css position fixed

【解决方案1】：

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

工作代码sn-p如下：

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

【讨论】：

【解决方案2】：

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

.Middle, .right{
   position: fixed;
}

.Middle{
   left: 45%;
}

.right{
   left: 55%;
}

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

【讨论】：

【解决方案3】：

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

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

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

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

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

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

【讨论】：