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

html - IE11上的粘页脚-LMLPHP

最佳答案

我建议您可以使用以下代码来使其在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上的粘页脚-LMLPHP

关于html - IE11上的粘页脚,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55482589/

10-16 19:36