CSS页面Flex三段式布局
通过Flex布局使得页面呈现出固定高度的header和footer分别固定在顶部和底部,中间的主体部分占用剩余的全部空间
/* flex布局-start */
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
.header-container {/* 我们希望 header 采用固定的高度,只占用必须的空间 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-body {
/* 将 flex-grow 设置为1,该元素会占用全部可使用空间
而其他元素该属性值为0,因此不会得到多余的空间*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer {
/* 和 header 一样,footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
/* flex布局-end */