Flex Footer不会停留在Chrome的底部

Question

我使用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>

演示JSFiddle。

Answer 1

试试这种方式，希望这就是你在寻找什么

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

Answer 2

我尝试将属性contentContainer从width更改为min-width，将content - flex-shrink更改为0：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;