Исправлено растяжение Div на весь экран, каждый из которых должен занимать% горизонтального пространства - PullRequest
Новая
       29

Исправлено растяжение Div на весь экран, каждый из которых должен занимать% горизонтального пространства

0 голосов
/ 28 июня 2018

У меня есть 3 основных деления, которые должны разделить экран по горизонтали (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>

Ответы [ 3 ]

0 голосов
/ 28 июня 2018

Итак, я создал JSFiddle для кода, который вы указали выше.

Я удалил все float: left; из двух div, которые мы должны исправить, и добавил position: fixed; top: 0; к ним обоим.

Так как это будет перекрывать их все слева, я перемещаю красный средний left: 45% и синий right: 0;.

Я понял, что это та функциональность, которую вы искали.

Дайте мне знать, если у вас есть какие-либо вопросы

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

0 голосов
/ 28 июня 2018

Пожалуйста, используйте стиль position:fixed;right:0%; для самого правого деления и 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>
0 голосов
/ 28 июня 2018

если вы знаете точную ширину всех элементов div, вы можете перемещать их сразу за другим, используя свойство CSS left 

.Middle, .right{
   position: fixed;
}

.Middle{
   left: 45%;
}

.right{
   left: 55%;
}

Я лично использую для этого jQuery, вы можете получить более точное смещение элемента и позиции div:)

...