1

I have a footer tag (after a body tag inside main tag):

footer {
  text-align: center;
  position: fixed;
  width: 100%;
  background-color: #d9efef;
  height: auto;
  bottom: 0;
}
  <body>
    <main>
      short html content
    </main>
  </body>
  <footer>
    <p>
      Some Text (large amount)
    </p>
  </footer>

On a desktop it's relatively nicely styled (even though it's fixed and not after content). On mobile though, it becomes very tall and is annoying to constantly have on the bottom of the screen.

How can I make the footer stay below the content at all times, but also stay at the bottom of the screen when the page content is short?

(The stackoverflow.com footer is kind of what I'm thinking about)

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Thunder Coder
  • 104
  • 14
  • 1
    Am I missing something here? Both desktop and mobile looks fine with context with scrollbars and without. – vanowm May 21 '21 at 10:18
  • @vanowm the original site footer has a lot more content in it, as do some of the sites pages, on mobile this is very uncomfortable, as the footer (being fixed) is constantly on screen. I couldn't copy full structure because It's a dynamic web application. go here to see actual structure: https://ide-b87400ce60984c7983e31e7cbafae21f-8080.cs50.ws/ – Thunder Coder May 21 '21 at 10:20
  • Perhaps add more information about "desktop" (browser(s), including version(s) and operating system (including version) and "mobile" (operating system (including version)). – Peter Mortensen Jul 09 '21 at 10:30

1 Answers1

2

You can use display: flex for this.

For the following markup

<body>
  <main>main content here</main>
  <footer>footer here</footer>
</body>

The CSS would be:

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

main {
  flex: 1 0;
}
footer {
  flex: 0 0;
}

What it does is make the body at least span the entire height and it's children layout following the 'flex' system. With a flexbox you can then specify for each child how it should behave.

The flex: 1 0; in the main will tell the browser to have main take as much place as possible and grow to do so. While flex: 0 0; in the footer tells the browser to not grow the footer.

Stephane Vanraes
  • 14,343
  • 2
  • 23
  • 41