Html 即使内容较少，如何在网页的右下角对齐 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1118513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I align a div at the bottom right corner of a web page even if the content is less?
提问by aalaap
I have this extremely simple splash page here: http://iph0wnz.com
我在这里有这个非常简单的启动页面：http: //iph0wnz.com
It has the main graphic in the middle, followed by my 'a.' logo at the bottom right. I want that logo to be aligned to the bottom right hand of the entire page, which means that if there is a lot of text content in the page, it appears after all that (i.e. it doesn't hover on top), but if there is less content -- like right now -- then it should get aligned to the very bottom of the screen, and not right after the content.
它的中间是主图形，后面是我的“a”。右下角的标志。我希望该标志与整个页面的右下角对齐，这意味着如果页面中有很多文本内容，它会在所有内容之后出现（即它不会悬停在顶部），但是如果内容较少——就像现在一样——然后它应该对齐到屏幕的最底部，而不是紧跟在内容之后。
I'll try to give a textual example like I saw in How to align content of a div to the bottom?:
我将尝试给出一个文本示例，就像我在如何将 div 的内容与底部对齐？：
-----------------------------
| less content, no scroll |
| |
| |
| |
| a. |
----------------------------- (screen height)
and
和
-----------------------------
| 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. |
-----------------------------
Apart from that other question linked above, I also looked at How do I force a DIV block to extend to the bottom of a page even if it has no content?but that didn't work for me either.
除了上面链接的其他问题之外，我还查看了如何强制 DIV 块扩展到页面底部，即使它没有内容？但这对我也不起作用。
I know this is dead simple, but I'm just tired of trying all the hacks and tricks I could find.
我知道这很简单，但我只是厌倦了尝试我能找到的所有技巧和窍门。
Also, I'd like to use the method to put the logo on the site when the actual content goes in - it's going to be a blog.
此外，当实际内容进入时，我想使用这种方法将徽标放在网站上 - 这将是一个博客。
Note: I don't mind using JavaScript and jQuery if required to achieve this effect.
注意：如果需要达到这种效果，我不介意使用 JavaScript 和 jQuery。
采纳答案by Darko Z
Try this solution:
试试这个解决方案：
* { 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; }
found here
在这里找到
EDIT: too late to remember how to do it or to explain it, but if you need more help search google for "sticky footer"
编辑：为时已晚，不记得怎么做或解释它，但如果您需要更多帮助，请在谷歌搜索“粘性页脚”
回答by Andrew
Something slightly different but equally useful for you might be:
一些稍微不同但对你同样有用的东西可能是：
position: fixed;
bottom: 0;
right: 0;
This will keep your div in the bottom right corner of the screen at all times and content will flow behind it (somewhat similar to background-attachment: fixed;). Maybe not exactly what you're looking for, but definitely easier than some of the other hacks out there. Note that this won't work in IE6.
这将使您的 div 始终保持在屏幕的右下角，内容将在其后面流动（有点类似于 background-attachment: fixed;）。也许不完全是你正在寻找的，但绝对比那里的其他一些黑客更容易。请注意，这在 IE6 中不起作用。
回答by Bran
I stumbled across this thread while trying to figure out how to align a table to the lower right of a web page I'm using as the background for my browser. I used the position:absolute for the table, nested in a div, but aligned it from the other direction. Here is how the CSS looks:
我在试图弄清楚如何将表格与我用作浏览器背景的网页的右下方对齐时偶然发现了这个线程。我使用 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);
Afterwards, it was a matter of playing with the table width in HTML to get it where I wanted it to be. I hope this helps anyone looking to do the same thing - and thank you to the OP and those who took the time to answer the OP's question and thus my own :-)
之后，就需要在 HTML 中调整表格宽度以使其达到我想要的位置。我希望这可以帮助任何想要做同样事情的人 - 感谢 OP 和那些花时间回答 OP 问题的人，因此是我自己的 :-)
Here is a link to a screenshotI took of the browser / desktop. You'll notice the table is in the lower right of the browser's background, but not directly on the edges.
这是我在浏览器/桌面上截取的屏幕截图的链接。您会注意到该表格位于浏览器背景的右下方，而不是直接位于边缘。
回答by usoban
Try using position: absolute along with javascripts screen.height.
尝试使用 position: absolute 和 javascripts screen.height。
Don't think it's the best solution but it worked for me a while ago. Probably this can be achieved even better with jQuery, but I didn't try it.
不要认为这是最好的解决方案，但不久前它对我有用。也许使用 jQuery 可以更好地实现这一点，但我没有尝试过。
回答by Clement Herreman
Using JavaScript : get your screen height, then dynamically create your or whatever, then
使用 JavaScript ：获取您的屏幕高度，然后动态创建您的或其他任何东西，然后
position:absolute;
top:<your document height>
Should put your div at the bottom. Do the same for right alignment. Though, i can't guarantee result on all browser.
应该把你的 div 放在底部。对右对齐执行相同的操作。虽然，我不能保证所有浏览器的结果。
