Как растянуть div от середины страницы до правого края (absolute), без горизонтальной прокрутки?

Question

[Иван]

Основной контент страницы завёрнут в

.wrapper { 
 max-width: 960px;
  margin: 0 auto;
}

Верхняя полоска сделана так

.header__topbg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 67px;
  background-color: #373737;
  z-index: -1;
}

Пытаюсь разместить вторую полоску от начала контента до края страницы, но при width: 100%; снизу появляется полоса прокрутки. Как избавиться от полосы прокрутки снизу, не подбирая ширину div "на глаз", т.к. могут быть разные ширины экранов.

.navbg {
  position: absolute; 
  top:67px; //Опустил вниз на высоту верхней полоски
  width: 100%;
  overflow: hidden;
  height: 69px;
  background-color: #474747;
  z-index: -1;
  margin: 0 10px;
}

Answer 1

[Антон Спирин]

Можно так https://jsfiddle.net/zmhaf9Lf/

Comments

[Иван]

Нет, я не могу использовать left: 50px; т.к. ширина страницы не известна заранее. От края страницы до wrapper может быть и больше 50px. Как приклеиться к началу wrapper я понял. Теперь мне нужно сделать полоску 960+px, т.е. до края окна браузера, какой бы ширины оно не было.

[Антон Спирин]

Иван, поправил.

[Иван]

Антон Спирин, огромное спасибо. Я и не знал про calc! А что насчёт совместимости со старыми браузерами? Я всё же хочу обойтись без новейших техник.

[Антон Спирин]

Иван, поддержка хорошая
https://caniuse.com/#feat=calc

[Иван]

Ну, хорошо. Значит это я отстал от жизни ;-).