我知道这个主题是满口的,但我找不到一个更好的方式来描述它.
我有一个标题,内容正文,页脚布局,其中页脚是’粘性’使用flex css,这非常有效.我在内容体中有另一个容器需要扩展以填充可用高度,当它的内容被追加时,它会滚动.到目前为止,我能够使用它的唯一方法是将内容体的高度设置为静态px值,这会破坏我所需的垂直响应性.
Codepen我的尝试：http://codepen.io/sinrise/pen/QwKPKp
html,body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexBox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 30px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
padding-bottom: 20px;
}
.content {
border: 1px solid gray;
margin: 10px 0 0;
width: 500px;
margin: 0 auto;
overflow-y: scroll;
height: 200px;
}
.item:nth-child(odd) {
background: #fbfbfb;
}
#footer{
background: lime;
}
最佳答案
尝试添加
#body {
display: flex;
flex-direction: column;
}
.content {
height: 0; /* Reduce the height as much as possible... */
flex-grow: 1; /* ...but make it fill all remaining space */
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
min-height: 100%;
flex-direction: column;
}
#header {
background: yellow;
height: 30px;
}
#body {
flex: 1;
border: 1px solid orange;
padding-bottom: 20px;
display: flex;
flex-direction: column;
}
.content {
border: 1px solid gray;
margin: 10px 0 0;
width: 500px;
margin: 0 auto;
overflow-y: scroll;
height: 0;
flex-grow: 1;
}
.item:nth-child(odd) {
background: #fbfbfb;
}
#footer {
background: lime;
}