Member Avatar for mwirsig

This is my very first thread (on any site that I can remember). I wasn't sure whether to put it here or under HTML and CSS.

My issue is that some of my client's pages don't have a lot of content, and many of them won't fill the screen vertically. On the pages with enough content that users have to scroll, I want the footer to come at the end of the content (so they have to scroll to see it) instead of fixed to the bottom of the browser window. However, on the pages that don't require users to scroll, I don't want the footer at the end of the content (sometimes it is barely halfway down the page). On those pages I want it at the bottom of the user's browser window.

I don't know how to do this or if it can be done. Any help or tips would be appreciated.

  • 2 Contributors
  • 2 Replies
  • 115 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by mwirsig

Dani AI

Generated

For : the behavior you want — footer at the bottom of the viewport when the page is short, but after the content when the page is long — is a common layout need and is handled cleanly today with CSS. is right to warn that viewports vary, but modern CSS (flexbox or full-viewport techniques) avoids fragile hacks and works reliably across current browsers.

A recommended, simple pattern is to make the page a column flex container and let the main content grow. This requires no JavaScript and keeps the footer in normal flow:

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto; /* takes remaining space when content is short */
}

/* footer stays in document flow; no position: fixed */
footer { }

If supporting very old browsers (pre-flexbox), the classic negative-margin "sticky footer" still works; see Ryan Fait’s explanation. For modern layouts, see a short roundup of approaches at CSS-Tricks: A Couple of Takes on the Sticky Footer and read the browser docs for flexbox at MDN: Learn Flexbox.

Practical notes: remove default body margins, test on mobile (100vh can be tricky on browsers with dynamic address bars), avoid position:fixed for this use-case (it overlays content), and verify the footer doesn’t overlap content when you change padding or header height. If the header/footer heights are variable, let main be flexible rather than hardcoding heights.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

A footer is not intended as a part of the Internet.

It is a waste of time trying to make one. Just put it at the bottom of your content. Trying to make a page exactly fill the window is also a waste of time.

Your client wants the impossible, for all practical purposes. Tell him to stop thinking of a web page as a piece of paper. It's more like a scroll.

Every attempt I have seen does something weird. One method that seemed to work crashed IE when the page closed. Another mostly worked until the 16x9 monitor appeared.

The Internet is not like a sheet of paper. It is like roll paper. It rolls out as far as the content goes, and no farther. Most browsers don't even know where the bottom of the screen is when deciding how to render. Windows handles the actual cropping of the page to fit the window pane.

The biggest problem with trying to create a footer is that the page writer has no idea what pane size or aspect ratio he is dealing with. The following affect these values:

- The screen resolution of the monitor
- The aspect ratio of the monitor (minor 4x3 variations, plus 16x9)
- Which browser the user is running
- Whether the browser is restored down, and what size and aspect ratio it has.
- Whether a sidebar is open.
- Which toolbars the user is displaying, including add-on ones (e.g.Google Toolbar)
- The fact that the W3C had no provision in its DOM for a footer on anything but a table.
- The fact that IE and FF have totally different DOM definitions for use with JavaScript defining the browser window, and other browsers can't even access this information.
- Footers are not compatible with screen readers.

This has to be the most asked question, because people expect to be able to use Word formatting on the web.

Member Avatar for mwirsig

Hmm

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.