我有一个标题,内容正文,页脚布局,其中页脚是’粘性’使用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;
}
原文地址:https://www.jb51.cc/css/427497.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。