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

[Anonymous]

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

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

: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