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.

回答1:

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%;
}

回答2:

I have tried changing the properties contentContainer from width to min-width, and content - flex-shrink to 0:

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;
  width: 100%;
  min-height: calc(100vh - 36px);
}
#content {
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 0;
}
#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>

来源：https://stackoverflow.com/questions/40093739/flex-footer-wont-stay-at-bottom-in-chrome

标签

css

html5

flexbox