Как выровнять div в правом нижнем углу веб-страницы, даже если содержание меньше?

Question

У меня есть эта чрезвычайно простая заставка: http://iph0wnz.com

Он имеет основной рисунок в середине, за которым следует мой «а». логотип внизу справа. Я хочу, чтобы этот логотип был выровнен по правому нижнему краю всей страницы , что означает, что если на странице много текстового содержимого, он появляется после всего этого (т.е. он не зависает вверху), но если контента меньше - как сейчас - то он должен выровняться по самому низу экрана, а не сразу после контента.

Я попытаюсь привести текстовый пример, подобный тому, который я видел в Как выровнять содержимое div по основанию? :

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

и

    -----------------------------
    | 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. |
    -----------------------------

Помимо этого другого вопроса, связанного выше, я также рассмотрел Как заставить блок DIV расширяться до нижней части страницы, даже если у него нет содержимого? , но это не сработало для я тоже.

Я знаю, что это очень просто, но я просто устал пробовать все хитрости и хитрости, которые я мог найти.

Кроме того, я хотел бы использовать метод для размещения логотипа на сайте, когда будет добавлен фактический контент - это будет блог.

Примечание. Я не против использования JavaScript и jQuery, если это необходимо для достижения этого эффекта.

Answer 1

Попробуйте это решение:

* { 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; }

найдено здесь

РЕДАКТИРОВАТЬ: слишком поздно, чтобы вспомнить, как это сделать или объяснить, но если вам нужна дополнительная помощь, поищите в Google "липкий нижний колонтитул"

Answer 2

Может быть что-то немного другое, но одинаково полезное для вас:

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

Это всегда будет держать ваш div в правом нижнем углу экрана, и контент будет течь за ним (что-то вроде background-attachment: fixed;). Может быть, не совсем то, что вы ищете, но определенно легче, чем некоторые другие хаки. Обратите внимание, что это не будет работать в IE6.

Answer 3

Я наткнулся на эту тему, пытаясь выяснить, как выровнять таблицу по правому нижнему краю веб-страницы, которую я использую в качестве фона для моего браузера. Я использовал положение: абсолютное для таблицы, вложенное в div, но выровняло его с другого направления. Вот как выглядит CSS:

    div 
        text-align:center

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

После этого нужно было поиграть с шириной таблицы в HTML, чтобы получить ее там, где я хотел. Я надеюсь, что это поможет всем, кто хочет сделать то же самое - и спасибо ОП и тем, кто нашел время, чтобы ответить на вопрос ОП и, следовательно, мой собственный: -)

Вот ссылка на снимок экрана Я взял из браузера / рабочего стола. Вы заметите, что таблица находится в правом нижнем углу фона браузера, но не по краям.

Answer 4

Использование JavaScript: получите высоту экрана, затем динамически создайте свой или что-то еще, затем

position:absolute;
top:<your document height>

Должен поставить свой div внизу. Сделайте то же самое для правильного выравнивания. Хотя я не могу гарантировать результат на всех браузерах.

Answer 5

Попробуйте использовать position: absolute вместе с javascripts screen.height.

Не думаю, что это лучшее решение, но оно сработало для меня некоторое время назад. Вероятно, это может быть достигнуто еще лучше с jQuery, но я не пробовал.