1

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

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
  • Ну так у вашего хедера высота 50px, а у секции margin 70px. В результате и пробел! 4 фев 2020 в 7:51
  • @DmitriiSedov все верно, мне этот "пробел" и нужен. только нужно чтобы изначально при загрузки страницы он был виден как под header так и над footer. То есть что-то типа когда хеадер и футер высотой 50px, потом после хеадер отступаем 50px и перед футер также 50px а остальная вся высота для pageContent
    – iKey
    4 фев 2020 в 7:55

2 ответа 2

2

Без использования 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>

1

Можно сделать таким образом с помощью псевдоэлемента :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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.