Wpis z mikrobloga

Mam ciekawe zadanie, muszę stworzyć kod html/css/js który umieści na dole strony footer który to będzie miał dynamiczną wysokość zależnie od tego jaki tekst w nim będzie, footer musi być na dole strony (albo poniżej widocznej części jeśli jest dużo contentu), ale nie może być przyklejony do dołu strony position fixed, dodatkowo nie może modyfikować żadnych styli na stronie (czyli odpada np. dodawanie position relative do body i absolutem umieszczanie na dole). Dodatkowo ten footer ma działać na wielu różnych stronach z różnymi stylami i html/js.

Jakbyście do tego problemu podeszli mam już cały footer jak ma wyglądać, już sobie go wstrzykuję na stronę jako ostatni element body i wszystko byłoby super gdyby nie to, że
1. Wysokość strony przed footerem czasem jest znacznie mniejsza niż rozdzielczość ekranu
2. Na niektórych stronach content renderuje się w różnych momentach i nie ma punktu zaczepienia aby wyliczać js wysokość gdzie wy pozycjonować element

Gdybym miał kontrolę nad kodem strony to byłoby to banalne, ale tak to na razie nie mam jakiegoś fantastycznego pomysłu. Nawet głupi position relative na body by mi rozwiązał problem, ale go nie mogę dodać :/
#javascript #programista15k #frontend
  • 10
@lobo: Ten skrypcik musi w 100% niezależny? Pomogłoby pewnie jeśli user musiałby podać jakieś ID, do którego ten footer ma być przyczepiony
@lobo: Jakoś ciężko mi się dzisiaj myśli. Jak na moje oko, to najłatwiejsze byłyby jakieś zabawy z Intersection Observerem w javascriptcie.
@GzS: Niestety jakbym mógł cokolwiek zrobić na stronie to już by było coś, ale niestety

@Veni: Intersection Observer niezbyt do tego by się raczej nadał, niewiele mi daje informacja, że element jest widoczny :)
@lobo: A to nie załatwisz tego flexboxem? Przykład

Edit: Doczytałem, że nie możesz modyfikować kodu strony. Ale może możesz JS-em "zapakować" całe body strony do kontenera (main z mojego przykładu) i obudować go resztą (footer i kontener, który zawiera main i footer)?
@kajtom: Nie bo może to wpłynąć na elementy na stronie :/

Na razie zrobiłem dodanie sticky i height 100% do html/body w teorii jednak nie powinno wpłynąć na nic, a w najmniejszym stopniu wpływa na stronę.