Question

无法在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>

https://jsbin.com/lonotadara

编辑： 左为Chrome，右为IE11：

Answer 1

我建议您也可以使用follownig代码使其在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>

IE11上的粘页脚

1 个答案: