html – 即使内容较少,如何在网页的右下角对齐div？

发布时间：2020-12-14 23:00:39 所属栏目：资源来源：网络整理

导读：我在这里有一个非常简单的启动页面：http://iph0wnz.com 它的主图形位于中间,其次是我的a.右下方的徽标.我希望该徽标与整个页面的右下角对齐,这意味着如果页面中有很多文本内容,它会显示在所有内容之后(即它不会悬停在顶部),但是如果内容较少就像现在一样

我在这里有一个非常简单的启动页面：http://iph0wnz.com

它的主图形位于中间,其次是我的’a’.右下方的徽标.我希望该徽标与整个页面的右下角对齐,这意味着如果页面中有很多文本内容,它会显示在所有内容之后(即它不会悬停在顶部),但是如果内容较少 – 就像现在一样 – 然后它应该与屏幕的最底部对齐,而不是在内容之后.

我将尝试给出一个像我在How to align content of a div to the bottom?中看到的文本示例：

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

除了上面提到的其他问题,我还看了How do I force a DIV block to extend to the bottom of a page even if it has no content?,但这对我也没有用.

我知道这很简单,但我只是厌倦了尝试我能找到的所有黑客和技巧.

此外,当实际内容进入时,我想使用该方法将徽标放在网站上 – 它将成为一个博客.

注意：如果需要实现此效果,我不介意使用JavaScript和jQuery.

最佳答案

尝试此解决方案：

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

发现here

编辑：为时已晚,无法记住如何操作或解释它,但如果您需要更多帮助搜索谷歌“粘性页脚”

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!