Мне нужна помощь, чтобы мой нижний колонтитул был прилип к нижней части, но также не должен перекрывать верхние элементы.Я все еще довольно плохо знаком с этим, поскольку мне потребовалось 2 года, чтобы найти работу в Интернете после окончания колледжа, поэтому я не успевал так много, как следовало бы.
В любом случае, это форматHTML у меня есть.Я хочу, чтобы «нижний колонтитул» застрял внизу, чтобы при его прокрутке снизу он оставался.Но я также не хочу, чтобы он поднимался слишком высоко, чтобы под ним оставалось пустое пространство.
Я пытался использовать стиль "position: absolute", чтобы нижний колонтитул оставался внизу.,Но я просто где-то читал, что это выходит за рамки обычного потока, и именно это вызывает наложение.
Так как я могу переформатировать мои стили, чтобы нижний колонтитул оставался ниже, но не перекрывался?
HTML:
<html>
<header></header>
<body>
<div class="content">
<div class="hd">Content of header</div>
<div class="bd">Content of body</div>
<div class="ft">Content of footer</div>
</div>
</body>
</html>
CSS: (основные части)
div {
display: block;
}
*, *:before, *:after {
box-sizing: inherit;
}
.hd {
position: static;
flex: 0 0 auto;
}
.bd {
position: relative;
flex: 1 0 auto;
}
.ft {
position: absolute;
bottom: 0px;
flex: 0 0 auto;
}