无法在 IE11 上使用粘性页脚。Chrome 看起来不错。很确定这里的问题是 min-height，只是找不到解决方法(需要保持 html 结构完整，没有包装器，只是 css 更改)。
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body style="height:100%;background:grey">
<div style="height:100%">
<div style="min-height:100%;background:white;display:flex;flex-direction:column">
<header style="background:green">hello</header>
<main>me mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome main</main>
<footer style="background:yellow;margin-top:auto">sticky footer</footer>
</div>
</div>
</body>
</html>编辑: 左边是 chrome，右边是 IE11:
最佳答案
我建议您也可以使用以下代码使其在 IE 中也能正常工作。
CSS
<style>
html {
display: flex;
}
body {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.header {
flex-shrink: 0;
background: green;
}
.footer {
flex-shrink: 0;
background: yellow;
}
.content {
flex-grow: 1;
}
</style>
HTML
<header class="header">hello</header>
<main class="content">me mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome main</main>
<footer class="footer">sticky footer</footer>
关于html - IE11 上的粘性页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55482589/