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

【问题标题】：Flex Footer won't stay at bottom in ChromeFlex 页脚不会在 Chrome 中停留在底部
【发布时间】：2016-12-15 04:47:47
【问题描述】：

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

【问题讨论】：

标签： css html flexbox

【解决方案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%;
}

【讨论】：

是的！这正是我所需要的。如果您发布您更改的确切内容，它可能会帮助下一个出现的人。我花了一点时间才看到它。非常感谢！
实际上，我刚刚发现这并不完全符合我的要求。在我的示例中，我的标题是静态的并且不会滚动到视图之外，但是这段代码不会这样做。
@Troncoso 你的意思是在你的示例标题中是固定的？ static 是 CSS 中的默认位置。为什么根本不将position: fixed 应用于标题？

【解决方案2】：

我尝试将属性 contentContainer 从 width 更改为 min-width，并将 content - flex-shrink 更改为 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>

【讨论】：