How to stick text to the bottom of the page?
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 ?
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 style="position: relative;background-color: blue; width: 600px; height: 800px;">
<div style="position: absolute; bottom: 5px; background-color: green">
TEST (C) 2010
</div>
</div>
Try:
.bottom {
position: fixed;
bottom: 0;
}
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>
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.
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>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:
<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.
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.
加载中,请稍侯......
精彩评论