Say I have a code like:
<div id="mydiv">This text is supposed to stay at the bottom of the window regardless of scrolling</div>
How can I program that (or use css) to keep at the bottom of my browser window, even when scrolling?
Help is very much appreciated
@f_atencia
Keeping div at bottom of the screen
Is this a footer? You just want it to stick?
<div id="mydiv">This text is supposed to stay at the bottom of the window regardless of scrolling</div>
Read this:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
You can used the css from that example.
or
Read this too:
http://ryanfait.com/sticky-footer/
You can also used css from that example too.
<div class="stickyFooter">This text should stay at the bottom of the screen.</div>
.stickyFooter{
position:fixed;
width:100%;
bottom:0;
}
That text stays fixed at the bottom of the screen.
I have used this approach several times. Adapted from: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0;}
html, body {height: 100%;margin: 0;}
.wrapper {min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -100px;}
.footer{height:100px;background:#ababab;}
</style>
</head>
<body>
<div class="wrapper">
<p>Page Content</p>
</div>
<div class="footer">
<p>Footer Content</p>
</div>
</body>
</html>
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.