Troncoso Troncoso - 1 month ago 7
CSS Question

Flex Footer won't stay at bottom in Chrome

I'm using flexbox to get my footer to stay at the bottom, only when the content is shorter than the viewport. If it is taller, the footer should stay below the content, so that you have to scroll to see it.

This works correctly in Firefox and Edge, but not in Chrome or IE.

In Chrome, as you'll see, making the viewport shorter than the content leaves the footer "stuck" to the bottom of the view port. If you then scroll, you'll see the footer scroll up the page.

I believe the issue is in the contentContainer:

#contentContainer {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
width: 100%;
}


This div holds the content and the footer, so that it can have the scroll bar instead of the content itself. I'm not really sure what's wrong with it, though.



html,
body,
#app {
padding: 0;
margin: 0;
}
#app,
#appContainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#header {
background-color: #dddddd;
width: 100%;
min-height: 36px;
height: 36px;
display: flex;
flex-direction: row;
}
#contentContainer {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
width: 100%;
}
#content {
display: flex;
flex-direction: column;
flex: 1;
}
#footer {
display: flex;
flex-direction: row;
background-color: #dddddd;
height: 20px;
min-height: 20px;
width: 100%;
}

<div id="app">
<div id="appContainer">
<div id="header">Header</div>
<div id="contentContainer">
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="footer">Footer</div>
</div>
</div>
</div>





Demo JSFiddle.

Answer

Try in this way, hope this is what are you looking for

https://jsfiddle.net/wzz703da/

html, body, #app
{
  padding: 0;
  margin: 0;
}

#app, #appContainer
{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#header
{
  background-color: #dddddd;
  width: 100%;
  min-height: 36px;
  height: 36px;
  display: flex;
  flex-direction: row;
}

#contentContainer
{
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  height: 100%;
  width: 100%;
}

#content
{
  display: flex;
  flex-direction: column;
  flex: 1;
}

#footer
{
  display: flex;
  flex-direction: row;
  background-color: #dddddd;
  height: 20px;
  min-height: 20px;
  width: 100%;
}
Comments