липкий нижний колонтитул на IE11 - PullRequest
Новая
       5

липкий нижний колонтитул на IE11

0 голосов
/ 02 апреля 2019

Не получается получить липкий нижний колонтитул, работающий на 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

РЕДАКТИРОВАТЬ: Слева хром, IE11:

enter image description here

1 Ответ

0 голосов
/ 03 апреля 2019

Я полагаю, что вы можете использовать следующий код, чтобы он работал и в 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>

wroking in IE

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...