Как прилепить пустой div к верхнему краю окна?

Question

[kozavr]

Link

Есть пустой div-контейнер, который нужен только для задания фона в верхней части страницы. В нем 2 других div-a. Когда начинаю задавать margin-top верхнему (не пустому) div-у, пустой контейнер вместе с ним сползает вниз. И margin-bottom у нижнего внутреннего блокатоже не срабатывает как хотелось бы. Оно в принципе понятно, пустой контейнер растягивается по вертикальным размерам своего содержимого. А как тогда:
а) прилепить верхнюю часть пустого контейнера к верху страницы?
б) сделать так, чтобы при задании маргинов top и bottom внутренних блоков, они отталкивались от границ пустого контейнера, чтобы он к ним не прилипал как сейчас?
Я наверняка что-то базовое упускаю.

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

Answer 1

[Максим]

ну можно не указывая размер fixed элементу растянуть его top:; left:; right:; bottom:; и вот эта схема будет адаптивной

Comments

[kozavr]

Вот такая запись для пустого контейнера вроде как нормально работает:
position: absolute;
top: 0px;
width: 100%;

[Максим]

kozavr: только width не надо

[Максим]

kozavr: codepen.io/Geyan/pen/WoByqb вот так получится

[kozavr]

. Shadow: без width он сужается до внутренних контейнеров, а мне нужно чтобы он был на всю ширину