CODEWITHSUNDEEP
htmlcssflexbox
Biker John
Biker John

Reputation: 2711

Flex sticky footer overlaps flex siblings on window resize (height shrink)

I have a very simple flexbox structure with a header, main and footer child elements, where the footer is ending item and plays the role as a sticky footer to stay on the bottom of the page on long pages. But whenever the window is shrunk (height), the footer overlaps all the content (other siblings) like it would have a fixed position property.

I would like it to have a default behavior and be equal to others which are hidden when site height is too small for current last item to be shown.

My structure:

HTML

<div id="main">
  <div id="alternate_header"></div>
  <div id="header">
    <div>1</div><div>2</div>
  </div>
  <div id="content">body</div>
  <div id="footer">footer</div>
</div>

CSS

body,html {

  margin: 0;
  height:100vh;

}

#main {

  display:flex;
  flex-direction: column;
  width:100%;
  height:100vh;
  min-height:0;

}

#main > div {

  width: 100%;

}

#alternate_header {

  display; none;

}

#header {

  background-color:red;
  height:5rem;
  line-height:5rem;
  align-self:flex-start;
  display:flex;
  flex-direction:row;

}

#header > div {

  flex:1;
}

#content {

  flex:1;
  background-color:#dcdcdc;
  min-height:0;

}

#footer {

  align-self:flex-end;
  background-color: yellow;
  height: 4rem;

}

JSFIDDLE

Upvotes: 0

Views: 370

Answers (1)

Ben Kolya Mansley
Ben Kolya Mansley

Reputation: 1793

The problem is caused by setting a fixed height on your containers: html, body and #main. This means that the height of your flexbox container will always be exactly 100vh: the height of the viewport.

Your #footer element has align-self: flex-end. This means that it will align itself to the end of your flex container: the bottom of the page.

You can have the same effect of ensuring that the page covers the whole screen, while allowing the page to grow and the footer to move with it, by replacing:

 height: 100vh;

with:

 max-height: 100vh;

in html, body & #main.

In addition, the header and footer will naturally align to the start and end as that's where they are in the DOM. Feel free to remove the align-self rules.

Upvotes: 2

Related Questions