Flex 页脚在 Chrome 中不会停留在底部

仅当内容短于视口时，我才使用 Flexbox 让页脚保持在底部。如果它较高，页脚应保持在内容下方，以便您必须滚动才能看到它。

这在 Firefox 和 Edge 中可以正常工作，但在 Chrome 或 IE 中则不行。

在 Chrome 中，正如您将看到的，使视口比内容短会使页脚“卡”在视口的底部。如果您随后滚动，您将看到页脚在页面上滚动。

我相信问题出在 contentContainer 中：

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

这个div保存内容和页脚，这样它就可以有滚动条而不是内容本身。不过，我不太确定这有什么问题。

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 https://jsfiddle.net/om7veLpL/.

以这种方式尝试，希望这就是您正在寻找的

https://jsfiddle.net/wzz703da/ 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%;
}