Справка по макету: zIndex и Overflow

Question

У меня есть фиксированный заголовок и боковая панель. В идеале я хочу, чтобы контент оставался в пределах фиксированного макета. Моя текущая проблема заключается в том, что весь мой контент находится в пределах <Content>, и когда я прокручиваю вниз, я всегда хочу иметь разрыв между контентом и заголовком.

Пробел между заголовком и содержимым при прокрутке вниз

В настоящее время свободного места нет.

Answer 1

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

body{
  position: relative;
  margin:0;
  padding:100px 0 0 0;
  overflow:hidden;
}

.fixed-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: red;
  color:#000;
  display: flex;
  align-items:center;
  justify-content:center;
}

.spacer{
  height: 50px;

}

.content{
  overflow-y:scroll;
  height:60vh;
}