css 使用Flexbox添加粘性页脚

Posted 2021-05-13

/* Sticky Footer */

.site-container {
 display:flex;
 flex-direction:column;
 height:100vh;
}

.site-inner {
 flex:1;
 width: 100%;
}

/*
IE 10 & 11

*An issue arose in that this fails in IE10 & 11 and the container collapses – so the container needs to display as block in these browser versions – which you can target with…
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .site-container { display: block; } /* IE10 & IE11 */
}