html – Flexbox：具有粘性页脚的可滚动内容

概述我想制作一个盒子(在这种情况下为flex-item),它始终位于容器的中间.在该框中,有一个页眉,页脚和内容部分.如果内容的大小增加得太高,我希望内容部分可滚动.页眉和页脚应始终可见,并且框应始终保留在其容器中. 这是我能够写的： HTML <div class="flex-container"> <div class="flex-item"> <header>Header</hea 我想制作一个盒子(在这种情况下为flex-item),它始终位于容器的中间.在该框中,有一个页眉,页脚和内容部分.如果内容的大小增加得太高,我希望内容部分可滚动.页眉和页脚应始终可见,并且框应始终保留在其容器中.

这是我能够写的：

HTML

<div >  <div >     <header>header</header>     <div >        A      <br>B      <br>C      <br>D      <br>E      <br>F      <br>G      <br>H      <br>I      <br>J      <br>K     </div>     <footer>Footer</footer>  </div></div>

CSS

body {  margin: 120px;}.flex-container {  display: flex;  wIDth: 200px;  height: 200px; /* We can assume that the container's height is hardcoded in this example,but the end solution should work even if this value is changed*/  border: 1px solID black;  justify-content: center;}.flex-item {  Box-sizing: border-Box;  wIDth: 150px;  border: 5px solID blue;  align-self: center;  background-color: red;  display: flex;  flex-flow: column;  max-height: 100%;}.content {  /* It should be possible to scroll this element when it get too big in height*/  background-color: grey;  flex: 1;}

代码托管在Jsfiddle：https://jsfiddle.net/9fduhpev/3/上

为了在视觉上解释同样的事情,这是目前的情况：

这就是我想要的：

解决方法 使用overflow-y：auto;.

阅读：http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

body {  margin: 120px;}.flex-container {  display: flex;  wIDth: 200px;  height: 200px;  border: 1px solID black;  justify-content: center;}.flex-item {  Box-sizing: border-Box;  wIDth: 150px;  border: 5px solID blue;  align-self: center;  background-color: red;  display: flex;  flex-flow: column;  max-height: 100%;}.content {  background-color: grey;  flex: 1;  overflow-y: auto;}

<div >  <div >     <header>header</header>     <div >        A      <br>B      <br>C      <br>D      <br>E      <br>F      <br>G      <br>H      <br>I      <br>J      <br>K      <br>L     </div>     <footer>Footer</footer>  </div></div>

总结

以上是内存溢出为你收集整理的html – Flexbox：具有粘性页脚的可滚动内容全部内容，希望文章能够帮你解决html – Flexbox：具有粘性页脚的可滚动内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。