Html 如何将文本粘贴到页面底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2810262/
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 to stick text to the bottom of the page?
提问by Misha Moroshko
I would like to put a line "All Rights Reserved..." at the bottom of the page. I tried to use absolute positioning, but this does not work as expected when the window resized to smaller height.
我想在页面底部放置一行“保留所有权利...”。我尝试使用绝对定位，但是当窗口调整到较小的高度时，这不会按预期工作。
How can I achieve this simple goal ?
我怎样才能实现这个简单的目标？
回答by Konerak
You might want to put the absolutely aligned div in a relatively aligned container - this way it will still be contained into the container rather than the browser window.
您可能希望将绝对对齐的 div 放在相对对齐的容器中 - 这样它仍将包含在容器中而不是浏览器窗口中。
<div style="position: relative;background-color: blue; width: 600px; height: 800px;">
<div style="position: absolute; bottom: 5px; background-color: green">
TEST (C) 2010
</div>
</div>
回答by Sergey Ilinsky
Try:
尝试：
.bottom {
position: fixed;
bottom: 0;
}
回答by Thorin Oakenshield
Try this
尝试这个
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="footer">All Rights Reserved</div>
</body>
回答by Steven Clough
This is how I've done it.
我就是这样做的。
#copyright {
float: left;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
bottom: 0px;
width: 100%;
} <div id="copyright">
Copyright 2018 © Steven Clough
</div>回答by Chop Labalagun
From my research and starting on this post, i think this is the best option:
从我的研究和这篇文章开始，我认为这是最好的选择：
<p style=" position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;">This will stick at the botton no matter what :).</p> This option allow resizes of the page and even if the page is blank it will stick at the bottom.
此选项允许调整页面大小，即使页面是空白的，它也会留在底部。
回答by LuckyLuke82
An old thread, but...Answer of Konerak works, but why would you even set size of a container by default. What I prefer is to use code wherever no matter of hog big page size is. So this my code:
一个旧线程，但是... Konerak 的答案有效，但是为什么您甚至默认设置容器的大小。我更喜欢在任何地方使用代码，无论大页面大小如何。所以这是我的代码：
<style>
#container {
position: relative;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
}
</style>
</HEAD>
<BODY>
<div id="container">
<h1>Some heading</h1>
<p>Some text you have</p>
<br>
<br>
<div id="footer"><p>Rights reserved</p></div>
</div>
</BODY>
</HTML>
The trick is in <br>where you break new line. So, when page is small you'll see footer at bottom of page, as you want.
诀窍在于<br>你打破新线的地方。因此，当页面很小时，您会根据需要在页面底部看到页脚。
BUT, when a page is big SO THAT YOU MUST SCROLL IT DOWN, then your footer is going to be 2 new lines under the whole content above. And If you will then make page bigger, your footer is allways going to go DOWN. I hope somebody will find this useful.
但是，当页面很大以至于您必须将其向下滚动时，您的页脚将是上面整个内容下的 2 个新行。如果您将页面变大，您的页脚总是会向下移动。我希望有人会发现这很有用。
