/ / Stawianie stopki na dole, gdy strona jest wykonana z pozycjonowania absolutnego - html, css, pozycja css, footer, sticky-footer

Stawianie stopki na dole, gdy strona jest wykonana z pozycjonowania absolutnego - html, css, pozycja css, footer, sticky-footer

Mam stronę, na której sekcje są wykonane z absolutnie rozmieszczonych elementów div.

To działało świetnie, dopóki nie spróbowałem umieścić stopki na stronie.

Moim problemem jest to, że nie mogę użyć dnawłaściwość do umieszczenia w stopce, ponieważ właściwość bottom ustawia ją na dole ekranu, a nie na stronie. Kiedy zawartość strony jest dłuższa niż ekran, stopka przechodzi pod treścią.

I nie mogę po prostu umieścić stopki na doleprzepływ elementów, ponieważ nie ma przepływu elementów. Wszystkie elementy div są ustawione absolutnie, więc jeśli umieściłem coś, co jest statyczne lub względnie ustawione, przechodzi ono na samą górę strony pod nagłówkiem.

Żadna z tych lepkich stopek nie działa, ponieważ zależą od przepływu elementów, aby umieścić stopkę na dole strony.

Oto jsbin: http://jsbin.com/oxefev/edit#javascript,html

Ten problem byłby wyjątkowo łatwy do naprawienia, gdyby istniał sposób na jego wykonanie bottom Właściwość css wyświetla się na dole strony zamiast na ekranie.

Edytować: Mogę po prostu ustawić go statycznie i użyć margin-top właściwość, aby zmusić ją do dołu strony, ustawiając ją na margin-top:1000px; ale musiałbym to zmienić za każdym razem, gdy dodawałem lub usuwano treści ze strony.

Odpowiedzi:

2 dla odpowiedzi № 1

Moje pierwsze zalecenie brzmi: nie ustawiaj absolutnie wszystkiego, co to za korzyść?

Niemniej jednak możesz osiągnąć to, czego szukasz dzięki aplikacji przetargowej javascript. Coś jak:

document.getElementById("footer").style.top = document.getElementById("content-wrapper").clientHeight + 150 + "px";

EDYTOWAĆ:

Wydaje się to również działać i nie trzeba zmieniać, jeśli dopasujesz wysokość nagłówka (+/- kilka pikseli w oparciu o modele pudełkowe):

document.getElementById("footer").style.top = document.body.clientHeight + document.getElementById("footer").clientHeight + "px";

0 dla odpowiedzi nr 2

jQuery (document) .height () zwraca dla mnie poprawne, spójne wyniki dla różnych przeglądarek. Gdy znasz wysokość umieszczania treści, stopka powinna być łatwa.