Member Avatar for f_atencia

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
  • 131 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

wanted the div to sit at the bottom of the browser window even while scrolling. The thread already shows two different ideas: demonstrated a fixed element (always visible) and showed the older "sticky footer" wrapper approach for pages that are shorter than the viewport. Both are valid — they solve different problems. Use a fixed element when the box must always be visible; use a sticky footer when you only want it at the bottom when content is short.

A modern, simple sticky-footer using flexbox (keeps footer at page bottom when content is short, but pushes it down when content grows):

<body>
  <main>...content...</main>
  <footer class="site-footer">Footer</footer>
</body>

html, body { height:100%; margin:0; }
body { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1 0 auto; }
.site-footer { margin-top:auto; }

If the goal is "always visible" (the element stays on-screen while scrolling), a fixed footer is the right choice. Best practice: set a CSS variable for the footer height and add equivalent bottom padding to your content so nothing is obscured; include the safe-area inset for iOS devices:

:root { --footer-h: 56px; }

.site-footer {
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--footer-h);
  z-index:1000;
}

main { padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom)); }

Troubleshooting and gotchas: add a z-index so the footer layers above other elements; avoid CSS transforms on ancestor elements (they can alter fixed positioning); mobile browsers change viewport height when toolbars hide/show — test on devices; use env(safe-area-inset-bottom) for notched devices. For specs and browser behavior see the MDN position docs and a flexbox sticky-footer writeup: MDN: position and CSS-Tricks: sticky footer approaches.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

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:

You can also used css from that example too.

Member Avatar for NardCake 
<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.

commented: Only comment that correctly addressed OP's request. +4
Member Avatar for JorgeM

I have used this approach several times. Adapted from: 

<!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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.