代码之家 › 专栏 › 技术社区 › aalaap

如何在网页右下角对齐DIV,即使内容较少?

cross-browser xhtml css html

aalaap · 技术社区 · 15 年前

我这里有一个非常简单的页面: 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来达到这个效果。

5 回复 | 直到 9 年前

Darko 15 年前

尝试此解决方案:

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

编辑:太晚了,记不起怎么做或解释它,但如果你需要更多的帮助,搜索谷歌的“粘性页脚”

Andrew 15 年前

一些稍有不同但对你同样有用的东西可能是:

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

这将使您的DIV始终保持在屏幕右下角,内容将在其后面流动(有点类似于后台附件:fixed;)。也许不完全是你想要的,但绝对比其他黑客容易。注意,这在IE6中不起作用。

Bran 9 年前

当我试图找出如何将一个表与我用作浏览器背景的网页右下角对齐时,我偶然发现了这个线程。我使用了位置:表的绝对位置,嵌套在一个DIV中,但与另一个方向对齐。以下是CSS的外观:

    div 
        text-align:center

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

之后,就需要用HTML来处理表的宽度,以达到我想要的效果。我希望这能帮助任何想做同样事情的人——并感谢OP和那些花时间回答OP问题的人,以及我自己的人——)

这里有一个链接指向 screenshot 我拿走了浏览器/桌面。您会注意到该表位于浏览器背景的右下角,但不直接位于边缘。

usoban 15 年前

尝试使用position:absolute和javascripts screen.height。

别以为这是最好的解决办法,但不久前它对我有用。也许用jquery可以更好地实现这一点,但我没有尝试过。

Clement Herreman 15 年前

使用javascript:获取屏幕高度,然后动态创建

position:absolute;
top:<your document height>

应该把你的分区放在底部。对正对齐也要这样做。不过,我不能保证所有浏览器都有结果。