0

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

4
Contributors
3
Replies
4
Views
4 Years
Discussion Span
Last Post by JorgeM
3
<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.

Votes + Comments
Only comment that correctly addressed OP's request.
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.