Как сделать отступ от зафиксированного header и footer?
69
28 марта 2022, 09:10
Есть такая разметка:
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>и получается что вверху страницы есть отступ, а внизу его не видно(он заметен только когда долистать страницу вниз):
Answer 1
Без использования 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>Answer 2
Можно сделать таким образом с помощью псевдоэлемента :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>
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47560 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23630 visits
- Как через css изменить цвет png изображения? 10349 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9210 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 24.11.2024 | 01:59