Chrome页脚不会停留在底部 [英] Flex Footer won't stay at bottom in Chrome

问题描述

我使用的是flexbox，只有当内容比视口短时，我的页脚才能保持在底部。如果它更高，页脚应该保持在内容的下面，所以你必须滚动才能看到它。

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

在Chrome中，如您所见，使视口短于内容会将页脚卡住到视图端口的底部。如果你滚动，你会看到页脚向上滚动页面。

我相信这个问题是在contentContainer中：

  #contentContainer {
 display：flex; 
 flex-direction：column; 
溢出：auto; 
身高：100％; 
宽度：100％; 
 
 
 
 $ b $ p 
 $ b 
这个div保存内容和页脚，以便它可以滚动而不是内容本身。虽然我不确定它有什么问题，但是。 
 
 
 
 
  html， body，＃app {padding：0; margin：0;}＃app，＃appContainer {display：flex; flex-direction：column; height：100vh;}＃header {background-color：#dddddd;宽度：100％; min-height：36px;身高：36px;显示：flex; flex-direction：row;}＃contentContainer {display：flex; flex-direction：column;溢出：自动;身高：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; 
 

 < div id =应用> < div id =appContainer> < div id =header>标题< / div> < div id =contentContainer> < div id =content> < P>内容< / p为H. < P>内容< / p为H. < P>内容< / p为H. < P>内容< / p为H. < P>内容< / p为H. < / DIV> < div id =footer>页脚< / div> < / DIV> < / div>< / div>  

href =https://jsfiddle.net/om7veLpL/ =nofollow> JSFiddle 。

>我已经尝试改变属性contentContainer从宽度到最小宽度，并且content-flex-shrink到0：

$ b

  html，body，＃app {padding：0; margin：0;}＃app，＃appContainer {display：flex; flex-direction：column; height：100vh;}＃header {background-color：#dddddd;宽度：100％; min-height：36px;身高：36px;显示：flex; flex-direction：row;}＃contentContainer {display：flex; flex-direction：column;溢出：自动;宽度：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; 
 

 < div id =应用> < div id =appContainer> < div id =header>标题< / div> < div id =contentContainer> < div id =content> < P>内容< / p为H. < P>内容< / p为H. < P>内容< / p为H. < P>内容< / p为H. < P>内容< / p为H. < / DIV> < div id =footer>页脚< / div> < / DIV> < / div>< / div>  

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.

解决方案

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>

这篇关于Chrome页脚不会停留在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！