问题
I have this extremely simple splash page here: 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.
I'll try to give a textual example like I saw in How to align content of a div to the bottom?:
-----------------------------
| 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.
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.
回答1:
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"
回答2:
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.
回答3:
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:
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 :-)
Here is a link to a screenshot I 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.
回答4:
Try using position: absolute along with 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.
回答5:
Using JavaScript : get your screen height, then dynamically create your or whatever, then
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.
来源：https://stackoverflow.com/questions/1118513/how-do-i-align-a-div-at-the-bottom-right-corner-of-a-web-page-even-if-the-conten