Как сделать постоянный отступ у фиксированного блока?

Question

[Maloy123]

Здравствуйте! Возник вопрос: как можно сделать постоянные отступы сверху и снизу у фиксированного блока при скролле? Пришел в голову только "костыль" с прозрачными бордюрами, но в таком случаи у скролл бара появляются тоже отступы, а их быть не должно.

Вот что получается на данный момент codepen.io/anon/pen/gLPoqw

Заранее спасибо за помощь!

Comments

[Lynn «Кофеман»]

А что мешает написать top:20px?

[Maloy123]

Алексей Тен: Где именно?

Answer 1

[iBird Rose]

перенести скролл на сам блок codepen.io/anon/pen/rWxJZN

Comments

[Maloy123]

Не подходит, скролл должен остаться там где он сейчас и растягиваться по всей высоте.

Answer 2

[Lynn «Кофеман»]

Вам нужны отступы у .window, у него и задавайте

.container {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

.window {
  background: #ffffff;
  width: 900px;
  padding: 10px;
  margin: 20px auto;
}

Comments

[Maloy123]

В таком случаи отступы при скролле будут съезжать, а нужно что бы они были постоянно.

[Lynn «Кофеман»]

Maloy123: Не понял. Куда съезжать?

[Maloy123]

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

Answer 3

[Ankhena]

Пример:
codepen.io/anon/pen/vyLjjE

Также, вот это

margin: 20px auto;
top: 0;
bottom: 0;

можно заменить на

margin: 0 auto;
top: 20px;
bottom: 20px;

Comments

[Maloy123]

Вы сделали тоже самое, что и в ответе выше. Как уже говорил, такой вариант не подходит.

[Ankhena]

Maloy123: придется пожертвовать либо скроллом, либо прозрачностью

[Ankhena]

Maloy123: чтобы отступы визуально никуда не уходили, а прокрутка была у большого блока, то нужно вставить вспомогательные прибитые через position:fixed блоки, высотой с желаемый отступ. Визуально будет выглядеть как отступы. Но чтобы так выглядело, большой блок должен быть непрозрачным и вспомогательные блоки тоже.
Возможно, прокатит вариант с заменой прозрачности большого блока на тень вокруг маленького.