即使内容较少，如何在网页右下角对齐 div？答案

【问题标题】：How do I align a div at the bottom right corner of a web page even if the content is less?即使内容较少，如何在网页右下角对齐 div？
【发布时间】：2010-11-10 06:00:24
【问题描述】：

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

它的中间是主图形，后面是我的“a”。右下角的标志。我希望该徽标与整个页面的右下角对齐，这意味着如果页面中有很多文本内容，它会在所有这些之后出现（即它不会悬停在顶部），但如果内容较少——比如现在——那么它应该对齐到屏幕的最底部，而不是紧跟在内容之后。

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

----------------------------------------- |内容少，无滚动 | | | | | | | |一种。 | -----------------------------------------（屏幕高度）

和

----------------------------------------- |更多内容，是的，滚动 | |快速的棕色狐狸跳跃- | |踩过懒狗和- | | d 她卖贝壳| |海边和一些o- | |放置随机文本| （屏幕高度） |这里有一个卷轴| |吧因为内容| |对于一个屏幕来说太多了- | |显示。好吧，我想| |足够了。 | |一种。 | -----------------------------------------

除了上面链接的其他问题，我还查看了How do I force a DIV block to extend to the bottom of a page even if it has no content?，但这对我也不起作用。

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

另外，当实际内容进入时，我想使用该方法将徽标放在网站上 - 这将是一个博客。

注意：如果需要，我不介意使用 JavaScript 和 jQuery 来实现此效果。

【问题讨论】：

标签： html css xhtml cross-browser

【解决方案1】：

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

不要认为这是最好的解决方案，但它在不久前对我有用。使用 jQuery 可能会更好地实现这一点，但我没有尝试过。

【讨论】：

【解决方案2】：

使用 JavaScript：获取你的屏幕高度，然后动态创建你的或其他的，然后

position:absolute;
top:<your document height>

应该把你的 div 放在底部。对右对齐执行相同的操作。不过，我不能保证所有浏览器的结果。

【讨论】：

【解决方案3】：

试试这个解决方案：

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

编辑：为时已晚，无法记住如何操作或解释它，但如果您需要更多帮助，请在 Google 上搜索“sticky footer”

【讨论】：

【解决方案4】：

稍有不同但对您同样有用的东西可能是：

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

这将使您的 div 始终位于屏幕的右下角，并且内容将在其后面流动（有点类似于 background-attachment: fixed;）。也许不完全是您正在寻找的东西，但绝对比那里的其他一些黑客更容易。请注意，这在 IE6 中不起作用。

【讨论】：

【解决方案5】：

我在试图弄清楚如何将表格与我用作浏览器背景的网页的右下角对齐时偶然发现了这个线程。我使用 position:absolute 表格，嵌套在一个 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 的链接。您会注意到该表格位于浏览器背景的右下方，但并不直接位于边缘。

【讨论】：