При наличии border-right/left вычесть высоту скроллбара

[Velidan]

Доброго дня уважаемые коллеги. Подскажите, пожалуйста, как можно сделать так, чтобы у блока, который имеет горизонтальную прокрутку, боковая граница не тянулась на высоту скролбара. 

 

П.С. вариант с тем, чтобы внутри поставить обертку, назначить ей границу (таки образом, наша граница не будет выходить за грани видимого блока к концу скроллбара) не очень хорош, потому что при прокрутке граница будет двигаться также с прокручиваемым контентом.

 

В общем вкратце. Как можно сделать так, чтобы border-right: 1px solid black; блока с горизонт прокруткой не вылезала на скроллбар, а ограничивалась высотой самого блока?

 

 

https://jsfiddle.net/e1o5kgk8/

 

 

Буду благодарен за любую помощь.

[klierik]

http://htmlbook.ru/css/box-sizing

 

border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.

 

update:

ах нет, прости, я не совсем тебя правильно понял: https://jsfiddle.net/e1o5kgk8/1/

[Velidan]

Спасибо за ответ. Но, при прокрутке граница также  прокручивается. (Это также как создать обертку для внутреннего контента  и назначить ей рамку. Она - то будет по высоте как надо, но будет прокручиваться при прокрутке). 

 

Можно ли так сделать, чтобы она была прижата справа и не двигалась (К сожалению fixed не работает с relative, а было бы намного удобнее работать).

 

 

Update  https://jsfiddle.net/e1o5kgk8/2/    (вернул к изначальному состоянию)

Edited August 13, 2015 by Velidan

[klierik]

нагуглил пример: http://jsfiddle.net/Q32gG/1/

[Velidan]

Спасибо за помощь, но здесь минусы из-за которых вариант также не подходит:  есть hr (которая играет роль границы). Она вообще внизу стоит, вне пределов контейнера + явно указана высота.  (Высота таблицы динамически меняется, по этому такой вариант не подходит).

 

Подобное решение худо-бедно подходит к вертикальному скролу (да и то, если точно знать нужные размеры), а вот для горизонтального - к сожалению, нет. 

[wwt]

Если не принципиально использовать border, а просто нужно чтобы визуально была линия, то:

#one {    box-shadow: -1px 0 0 #000 inset;}

ЗЫ ещё забавная вещь https://jsfiddle.net/e1o5kgk8/3/

[Velidan]

Спасибо за ответ. Да, это нормальный вариант, если точно знать ширину скроллбара) а он в разных ОС по разному. 

Единственный вариант, в таком случае, это скрывать системный скроллбар и делать свой. Тогда точно будем знать вычитаемую высоту.

 

Только жаль, что на чистом css такие проблемы возникают с элементарными вопросами.

[wwt]

Спасибо за ответ. Да, это нормальный вариант, если точно знать ширину скроллбара) а он в разных ОС по разному. Единственный вариант, в таком случае, это скрывать системный скроллбар и делать свой. Тогда точно будем знать вычитаемую высоту. Только жаль, что на чистом css такие проблемы возникают с элементарными вопросами.

вы о чем? в моем примере вообще не важна высота и ширина скроллбара и делается все с помощью одного свойства CSS, скроллбар находится выше и закрывает часть тени.

[Velidan]

Прошу прощения, изначально посмотрел на 

ЗЫ ещё забавная вещь https://jsfiddle.net/e1o5kgk8/3/

 

 

Там увидел, что тень смещена стабильно на 100px вверх.

 

 

А вообще это именно то что нужно. Только очень странно что тень скрывается под скроллбаром, а граница нет. Не знал, спасибо огромное.

[wwt]

Там увидел, что тень смещена стабильно на 100px вверх.

 

Это был просто пример что еще можно делать так.

 

 

 

А вообще это именно то что нужно. Только очень странно что тень скрывается под скроллбаром, а граница нет. Не знал, спасибо огромное.

 

Почему странно? Скроллбар это элемент который отрисовывает и позиционирует браузер(мы лишь указываем показывать его или нет) и он специально выше чтобы другие элементы его не перекрывали. А бордер не скрывается потому что он обрамляет блок,  внутри которого есть скроллбар. Тень же мы наложили внутреннюю, если наложить внешнюю тень она тоже будет видна.

[Velidan]

Очень грамотно объяснили. Не знал нюансов с тенью. Очень благодарен. 

Edited August 14, 2015 by Velidan