Могу ли я использовать CSS, чтобы верхний край элемента нижнего колонтитула примыкал к нижнему краю страницы без жестког ⇐ Html

[Anonymous]

У меня есть веб-сайт, на котором есть элемент нижнего колонтитула с украшениями, прикрепленными к его верхнему краю в псевдо-элементе (выходящем за пределы ограничительной рамки элемента нижнего колонтитула), и я хочу, чтобы только чтобы верхний край с декорациями оставался в самом низу области просмотра до тех пор, пока пользователь не прокрутит страницу до нижней части страницы и не появится остальная часть нижнего колонтитула.
Я могу заставить его работать, если я жестко закодирую его высота элемента нижнего колонтитула — например, если я знаю, что ограничивающая рамка нижнего колонтитула имеет высоту ровно 92 пикселя (исключая переливающиеся украшения), тогда положение правил CSS: липкое; внизу: -92px достигаю именно того, чего хочу. Однако на реальном веб-сайте содержимое нижнего колонтитула различается на разных страницах и может быть обновлено и/или изменено в будущем, поэтому я хотел бы сделать липкость нижнего колонтитула адаптивной, а не жестко запрограммированной.
Когда проценты используются в свойстве Bottom, они обрабатываются как процент от содержащего блока, а не как позиционируемый элемент, поэтому что-то вроде Bottom: -100% не работает, и я мне не удалось найти настройку Calc(), которая могла бы вычесть динамическую высоту нижнего колонтитула из высоты страницы в этом случае.
Я открыт для альтернатив позиции: липкий, если есть более простой способ добиться того же эффекта.
Ниже приведен макет желаемого эффекта, в настоящее время используется жестко запрограммированная высота нижнего колонтитула, которая должна делать видимой только золотую рамку и серые украшения, пока вы не прокрутите все вниз, после чего должен появиться сам светло-серый нижний колонтитул.

Код: Выделить всё

:root {
--border-thickness: 1px;
--border-color: gold;
}
body {
margin: 0;
line-height: 1.5;
}
header {
background: gainsboro;
position: sticky;
top: 0;
padding: 0.5rem 2rem 0.75rem;
text-align: center;
}
main {
margin: 0 2rem 2rem;
}
footer {
background: gainsboro;
position: sticky;
bottom: -92px; /* Hardcoded footer-height offset that I want to make responsive */
padding: 0.75rem 2rem 0.5rem;
text-align: center;
}
header::after, footer::after {
content: "";
position: absolute;
left: 0;
width: 100%;
pointer-events: none;
overflow: visible;
height: calc(100% + 1.5rem);
background: linear-gradient(to right, var(--border-color), var(--border-color)) no-repeat;
background-size: 100% var(--border-thickness);
filter: drop-shadow(0 0 0.5rem var(--border-color)) drop-shadow(0 0 0.5rem rgb(from var(--border-color) r g b / 0.25));
}
header::after {
top: 0;
background-position: center calc(100% - 1.5rem + var(--border-thickness));
}
footer::after {
bottom: 0;
background-position: center calc(0% + 1.5rem - var(--border-thickness));
}
footer::before {
content: "";
pointer-events: none;
display: block;
position: absolute;
top: -36px; /* Decoration height */
left: 0;
width: 100%;
height: 36px; /* Decoration height */
background: gray;
mask:
url("https://i.sstatic.net/ZdOiZWmS.png") 0 0,
url("https://i.sstatic.net/XxvJSPcg.png") 100% 0;
mask-size: 140px auto, 224px auto; /* Decoration widths */
mask-repeat: no-repeat;
}

Код: Выделить всё

Site Header


Long Text to Scroll Past
Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent.
Contra quos omnis dicendum breviter existimo.  Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.
Sive enim ad sapientiam perveniri potest, non paranda nobis solum ea, sed fruenda etiam sapientia est; sive hoc difficile est, tamen nec modus est ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum id, quod quaeritur, sit pulcherrimum. etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? sin laboramus, quis est, qui alienae modum statuat industriae? nam ut Terentianus Chremes non inhumanus, qui novum vicinum non vult 'fodere aut arare aut aliquid ferre denique' non enim illum ab industria, sed ab inliberali labore deterret, sic isti curiosi, quos offendit noster minime nobis iniucundus labor.


Site Footer

© 45 BC Marcus Tullius Cicero

[url=#]Other Work[/url] | [url=#]Contact[/url] | [url=#]Donate[/url]

Подробнее здесь: https://stackoverflow.com/questions/798 ... ottom-edge