Jak wyrównać element div w prawym dolnym rogu strony internetowej, nawet jeśli zawartość jest mniejsza?

Question

Mam tutaj bardzo prostą stronę powitalną: http://iph0wnz.com

Ma główną grafikę pośrodku, a następnie moją "a". logo w prawym dolnym rogu. Chcę, aby to logo było wyrównane do prawej dolnej części całej strony strona, co oznacza, że ​​jeśli na stronie jest dużo treści tekstowej, pojawia się po wszystkim (tj. Nie ma wskaźnika na górze), ale jeśli jest mniej treści - jak teraz - powinna zostać wyrównana do samego dołu ekranu, a nie tuż po treści.

Postaram się dać tekstowy przykład jak widziałem w How to align content of a div to the bottom?:

 
    ----------------------------- 
    | less content, no scroll | 
    |       | 
    |       | 
    |       | 
    |      a. | 
    ----------------------------- (screen height) 

i

 
    ----------------------------- 
    | more content, yes scroll | 
    | the quick brown fox jump- | 
    | ped over the lazy dog an- | 
    | d she sells sea shells on | 
    | the sea shore and some o- | 
    | ther random text is put | (screen height) 
    | here so there is a scroll | 
    | bar because the content | 
    | is too much for one scre- | 
    | en to show. okay, I think | 
    | that is enough.   | 
    |      a. | 
    ----------------------------- 

Oprócz tego drugiego pytania związanego powyżej, ja również spojrzał na How do I force a DIV block to extend to the bottom of a page even if it has no content? jednak, że nie zrobił Nie działa też dla mnie.

Wiem, że to nie jest proste, ale jestem po prostu zmęczony próbowaniem wszystkich sztuczek i sztuczek, jakie mogłem znaleźć.

Chciałbym również użyć tej metody, aby umieścić logo na stronie, gdy rzeczywiście znajdzie się treść - będzie to blog.

Uwaga: Nie mam nic przeciwko używaniu JavaScript i jQuery, jeśli jest to wymagane, aby osiągnąć ten efekt.

Answer 1

Spróbuj tego rozwiązania:

* { margin: 0; } 
html, body { height: 100%; } 
/* the bottom margin is the negative value of the footer's height */ 
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; } 
/* .push must be the same height as .footer */ 
.footer, .push { height: 142px; } 

znaleziono here

EDIT: zbyt późno, aby pamiętać, jak to zrobić, czy to wytłumaczyć, ale jeśli potrzebujesz więcej pomocy wyszukiwarki Google dla "lepkiej stopce"

Answer 2

Spróbuj użyć position: absolute wraz z screen.vascript javascripts.

Nie sądzę, że to najlepsze rozwiązanie, ale sprawdziło się to już jakiś czas temu. Prawdopodobnie można to osiągnąć jeszcze lepiej dzięki jQuery, ale nie wypróbowałem tego.

Answer 3

Korzystanie JavaScript: uzyskać wysokość ekranu, a następnie dynamicznie utworzyć lub cokolwiek, to

position:absolute; 
top:<your document height> 

powinien położyć swoje div na dole. Zrób to samo dla prawidłowego wyrównania. Chociaż nie mogę zagwarantować wyników we wszystkich przeglądarkach.

Answer 4

coś nieco inna, ale równie przydatna może być:

position: fixed; 
bottom: 0; 
right: 0; 

To będzie utrzymywać twój div w prawym dolnym rogu ekranu przez cały czas, a zawartość będzie płynęła za nim (trochę podobnie do załącznika w tle: naprawiony;). Może nie dokładnie to, czego szukasz, ale zdecydowanie łatwiejsze niż niektóre inne hacki tam. Zauważ, że to nie zadziała w IE6.

Answer 5

Natknąłem się na ten wątek, próbując dowiedzieć się, jak wyrównać tabelę w prawym dolnym rogu strony internetowej używam jako tło dla mojej przeglądarki. Użyłem pozycji: absolute dla tabeli, zagnieżdżonej w div, ale wyrównanej z innego kierunku.Oto, jak wygląda CSS:

div 
     text-align:center 

    table 
     position:absolute; 
     top:63%; 
     left:80%; 
     text-align:left; 
     background:rgba(0,0,0,0.4); 

Następnie trzeba było zagrać z szerokością stołu w HTML, aby uzyskać go tam, gdzie chciałem. Mam nadzieję, że pomoże to każdemu, kto chce zrobić to samo - i dziękuję OP i tym, którzy poświęcili czas na odpowiedź na pytanie OP, a więc i moi :-)

Oto link do screenshot, który zrobiłem przeglądarka/komputer. Zauważysz, że tabela znajduje się w prawym dolnym rogu tła przeglądarki, ale nie bezpośrednio na krawędziach.