0

My HTML layout looks like this:

body //display: flex
   nav //flex-basis: 85px
   main //flex-grow: 1
   footer //flex-basis: 50px

  1. On desktop view, the footer is at the bottom: but if the content grows, later on, the footer is no more at the bottom, there is a gap between the bottom of the page and the end of the footer.

  2. on mobile, you can immediately see the gap.

I'm using display: flex and looking for a way to make sure that the footer always stays at the bottom.

her'es the layout css:

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

nav {
  flex-basis: 85px;
}

.main {
  flex-grow: 1;
}
footer {
  flex-basis: 50px;
  background-color: #10182f;
  color: white;
  padding: 15px 0;
}

Thanks in advance

here are some images to clarify: Normal desktop view: Normal desktop view

Longer viewport: Long desktop view

Normal mobile: Normal Mobile View

Mendi Sterenfeld
  • 378
  • 5
  • 26

2 Answers2

0

Try

position: absolute; 
bottom: 0;

for the footer. However maybe you have margin that you are missing on somewhere

Evren
  • 4,147
  • 1
  • 9
  • 16
0

Better way is to not use flex. All you need to do is use calc.

Example: https://codepen.io/seanstopnik/pen/1e41196f62be22d881a4fe61e25c82da

body {
  margin: 0;
}

header {
  height: 80px;
  background: red;
}

main {
  min-height: calc(100vh - (80px + 50px));
}

footer {
  height: 50px;
  background: blue;
}
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
Sean Stopnik
  • 1,868
  • 11
  • 9
  • doesn't work if the page is more than 100vh or gets longer dynamically. – Mendi Sterenfeld Mar 01 '21 at 20:36
  • Oh sorry... I misunderstood the question. If you are wanting it to always be on the bottom, you can use `position: fixed;`. Example: https://codepen.io/seanstopnik/pen/708e539651cfee53681a030eaac93b13 – Sean Stopnik Mar 01 '21 at 22:33
  • No, I want the footer always to be at the bottom of the page. so if I add more content to the main div, the footer should go to the bottom. not stay where it is or get this weird margin you see on the pic. – Mendi Sterenfeld Mar 02 '21 at 15:46
  • I again must be confused, because the original solution I provided does what I believe you are asking. Setting a `min-height` will keep the footer at the bottom if there is no content, but as you add content, it will continue to move down. In any case, good luck. – Sean Stopnik Mar 02 '21 at 16:10
  • yeah, I only get this problem with the Algolia Autocomplete search bar. Looks like it overrides the z-index or something and just goes over the footer. creating a white space below the footer – Mendi Sterenfeld Mar 02 '21 at 16:44