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 that you have read and understand our privacy policy and code of conduct.

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