Question 42501 in Html Question posted in
Some basic documentation can be found here.

Make footer (not a direct child of body) stick to bottom in Flexbox based layout – Html

I have a website with a footer that I want to stick to the bottom of the page. In my case, there’s also a sidebar, making the structure a tad more complex than just main and footer inside the html body.

The typical recommendation to make the body min-height: 100vh, and the main content flex-grow: 1 does not work in my case.

How can I make the footer stick to the bottom in the code sample below? I am hoping for a flexbox-based solution.

body {
}

#outer-container {
    display: flex;
}

#inner-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

footer {
}
<body>
  <div id="outer-container">
    <aside>ASIDE</aside>
    <div id="inner-container">
      <main>MAIN</main>
      <footer>FOOTER</footer>
    </div>
  </div>
</body>
Tags:

2

Answers


  1. 0

    You need to add display: flex; to the parent and flex-grow: 1; to the child. Also, add min-height: 100vh; to the #inner-container.

    See the snippet below.

    body {
  margin: 0;
}

#outer-container {
  display: flex;
}

#inner-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}
    <body>
  <div id="outer-container">
    <aside>ASIDE</aside>
    <div id="inner-container">
      <main>MAIN</main>
      <footer>FOOTER</footer>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    By default the height is undefined and will be calculated to fit-content. YOu need to add a min-height: 100vh to the container to utilize the entire screen as a minimum. Then the easiest way to push the footer to the bottom is by giving in a margin-top: auto

    #outer-container {
    display: flex;
}

#inner-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* added */

body {
  margin: 0;
}

#outer-container {
  min-height: 100vh;
  padding: 0.5em;
  box-sizing: border-box;
}

footer {
  margin-top: auto;
}
    <body>
  <div id="outer-container">
    <aside>ASIDE</aside>
    <div id="inner-container">
      <main>MAIN</main>
      <footer>FOOTER</footer>
    </div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search