利用flex让页脚自适应置底显示

昨天帮朋友写个简单的页面，由于没有传后台数据所以页面写完主体部分很短，是的footer页脚没有显示在视窗的底部。
最后用flex的拉伸性解决了。

看一下css代码

html,
body {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: 'Oswald', sans-serif;
    color: #ebebeb;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.MainContent {
    flex: 1;
    color: #333;
    padding: .5rem;
}

.Footer {
    background-color: violet;
    padding: .5rem;
}

原理就是flex属性会让内容在空间允许的情况下伸展，因为body是flex盒子，设置了交叉轴纵向拉伸，页面高度是满视窗，
当缩小窗口，页面满屏后，footer又会依照标签排序被挤下去，实现正常排版，从而隐藏，完美~

转载于:https://www.cnblogs.com/zhenfei666/p/9357163.html