БЛОГ НА HUSL


Как сделать отступ от зафиксированного header и footer?

Автор вопроса: iKey

Есть такая разметка:

body {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
}

header {
	top: 0;
	height: 50px;
	width: 100%;
	max-width: 640px;
	margin:0px auto;
	position: fixed;
  	z-index: 999;
  	border-bottom: 1px solid #000;
  	background: #fff;
}

#pageContent {
	margin: 70px 0px;
	z-index: 998;
	background: yellow;
}

footer {
	bottom: 0;
	height: 50px;
	width: 100%;
	max-width: 640px;
	margin: 0px auto;
	position: fixed;
  	z-index: 999;
  	border-top: 1px solid #000;
  	background: #fff;
}
<body>

  <header>header</header>
  <section id="pageContent">
      content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>
  </section>

  <footer>footer</footer>

</body>

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


Источник

Ответы (2 шт):

Автор решения: Dmitrii Sedov

Без использования js может помочь такой подход. Так как хедер и футер имеют фиксированную позицию, то относительно них не получится позиционировать, так как они не зависят от контента внутри и лежат поверх всего, имея определённую позицию на экране. Но для решения Вашей задачи воспользуйтесь кодом ниже (добавлено у page-content height: calc(100vh - 140px); overflow-y: auto;.

body {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
}

header {
	top: 0;
	height: 50px;
	width: 100%;
	max-width: 640px;
	margin:0px auto;
	position: fixed;
  	z-index: 999;
  	border-bottom: 1px solid #000;
  	background: #fff;
}

#pageContent {
	margin: 70px 0px;
	z-index: 998;
	background: yellow;
  height: calc(100vh - 140px);
  overflow-y: auto;
}

footer {
	bottom: 0;
	height: 50px;
	width: 100%;
	max-width: 640px;
	margin: 0px auto;
	position: fixed;
  	z-index: 999;
  	border-top: 1px solid #000;
  	background: #fff;
}
<body>

  <header>header</header>
  <section id="pageContent">
      content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>
  </section>

  <footer>footer</footer>

</body>

→ Ссылка
Автор решения: Sevastopol'

Можно сделать таким образом с помощью псевдоэлемента :after:

body {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}

header {
  top: 0;
  height: 50px;
  width: 100%;
  max-width: 640px;
  margin: 0px auto;
  padding-bottom: 20px;
  position: fixed;
  z-index: 999;
  background: #fff;
}

header:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: #fff;
  border-top: 1px solid #000;
}

#pageContent {
  margin: 70px 0px;
  z-index: 998;
  background: yellow;
}

footer {
  bottom: 0;
  height: 50px;
  width: 100%;
  max-width: 640px;
  margin: 0px auto;
  padding-top: 20px;
  position: fixed;
  z-index: 999;
  background: #fff;
}

footer:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: #fff;
  border-bottom: 1px solid #000;
}
<body>

  <header>header</header>
  <section id="pageContent">
    content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>    content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>    content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>    content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>    content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>    content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>
  </section>

  <footer>footer</footer>

</body>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.