2016-04-14 1 views
2

Код: https://jsfiddle.net/gsnfzn35/3/Set ширина: 100% по отношению к другому объекту для объекта, который должен быть закреплен

Это немного напуганный, чтобы описать, нажмите на кнопку переключения ящика. Появляется выдвижной ящик справа. Этот выдвижной ящик является одним контейнером, но имеет 2 ключевых компонента. Первым компонентом является весь контент вверху. Последний компонент является «фиксированной строки» на дне:

<div class="scroll-fixed-row" style="width:100%;text-align: right"> 
    <p> 
    FIXED FINAL ROW 
    </p> 
</div> 

Эта строка должна быть ширина вытащить выдвижной ящик, независимо, что ширина; НЕ ширина экрана. В настоящее время, хотя, если вы проверяете элемент с помощью width:100%, вы видите, что ширина - это ширина экрана, а не выдвижной ящик. Другой способ увидеть это в том, что когда есть width:100%;text-align:right, текст отключен от экрана, вытянутый справа от слишком широкой строки. Удалите width:100%, и вы снова увидите текст.

Я предполагаю, что это связано с тем, что scroll-fixed-row зафиксирован, и поэтому его ширина занимает от экрана, а не сам выдвижной ящик. Но это исправление необходимо, потому что scroll-fixed-row должен оставаться внизу, хотя остальные вытаскивающие ящики прокручиваются. Учитывая это ограничение, как установить ширину окна scroll-fixed-row в качестве ширины выдвижного ящика для любого экрана (полная реакция) БЕЗ предоставления определенной ширины в пикселях на основе медиа-запросов?

Причина Я спрашиваю это потому, что я хотел бы разделить на 2 scroll-fixed-row «секции» используя либо таблицу и 2 <td width="50%"> или с использованием Bootstrap сетки и 2 <div class="col-xs-6"> подряд. В текущей реализации (НЕ в скрипте) содержимое во второй сетке просто отбрасывается с страницы (эта же проблема сейчас), потому что ширина таблицы наследуется от экрана. Я думаю, что смогу понять эту часть, если кто-то может помочь мне ответить на этот вопрос.

+0

вы можете использовать jQuery для получения ширины вытягиваемого контейнера каждый раз, когда он вытягивается. Затем вы можете установить ширину фиксированной строки, равную этому. –

ответ

0

Ширина может быть решена с помощью inherit вместо 100%, это сделает fixed элемент получить ширину своего родителя, в вашем случае .container.scroll. Я заметил, что у вас добавлено дополнение к родительскому объекту, унаследованная ширина будет включать прокладки и поэтому элемент fixed будет накладывать полосы прокрутки.

Код:

.scroll-fixed-row { 
    position: fixed; 
    text-align: right; 
    background-color: white; 
    border-top: 1px solid black; 
    width: inherit; /* get width from parent */ 
    bottom: 0; /* stick to bottom */ 
    right: 0; /* fix offset caused by padding */ 
} 

Другой вещь, которую я заметил, что в вашем коде, что вы используете margin-top: 70px на .scroll, чтобы компенсировать его из фиксированного красного нав, это приводит к тому, нижней части, которая находится вне видового быть невидимым, особенно стрелкой вниз. Я изменил его на следующее:

.scroll { 
    position: fixed; 
    top: 70px; /* offset from top (nav height) */ 
    height: calc(100% - 70px); /* calculate height minus the top offset */ 
} 

Если вы хотите, чтобы предотвратить фиксированный элемент из перекрытия полос прокрутки, вы могли бы применить pointer-events: none и добавить еще одну оболочку в HTML, который получает интервал 15px как содержание, для лучше консистенция:

.scroll-fixed-row { 
    ... 
    pointer-events:none; /* disables mouse functionality to enable scrollbar control */ 
} 

.scroll-fixed-row .inner { 
    border-top:2px solid red; 
    background:lightblue; 
    margin:0 30px 0 15px; 
    pointer-events:auto; /* allows mouse functionality */ 
} 

jsFiddle демо - полоса прокрутки перекрытия: https://jsfiddle.net/azizn/guufj4a0/

jsFiddle демо - дополнительная обертка: https://jsfiddle.net/azizn/d6wwk51b/

+0

Спасибо также за то, что вы так полны с бонусной точкой! – james

Смежные вопросы