Макет с заголовком, нижним колонтитулом и разделом содержимого в IE11

Question

В настоящее время я разрабатываю одностраничное приложение, состоящее из заголовка, нижнего колонтитула и раздела контента.Раздел содержимого должен всегда заполнять доступное пространство между верхним и нижним колонтитулами, и в случае, если порт представления слишком мал, пользователь должен иметь возможность прокручивать всю страницу.Это означает, что нижний колонтитул не является липким в этом смысле.

Помещение всех трех частей во flexbox и установка flex: auto 1 1 для содержимого не имеет никакого эффекта, так как IE11 имеет проблемы с flex-элементами, контейнер которых имеет 100%в качестве минимальной высоты.

Знаете ли вы какую-либо технику, позволяющую использовать этот тип макета?

Обновление:

Для иллюстрации проблемы приведуфрагмент.

Обновление 2:

Поскольку я хочу добавить элемент представления (класс .view) в предыдущий, в зависимости от текущего маршрута, который мне нужноиспользуйте position: relative для элемента содержимого.К сожалению flex-shrink: 0 больше не действует.

html, body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    background: #000000;
    color: #EFEFEF;
    font-family: Segoe UI, Roboto, Helvetica;
  }

  #app {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .header-section {
    flex-shrink: 0;
  }

  .footer-secton {
    flex-shrink: 0;
  }

  .content {
    position: relative;
    flex: auto 1 1;
    background: rgba(64, 124, 214, 0.5);
  }

  .view {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

<div id ="app" class="container">
    <header class="header-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </header>
    <main class="content">
      <div class="view">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
         ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
         dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
         dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
         eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet.
      </div>
    </main>
    <footer class="footer-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </footer>
  </div>

Answer 1

Это ответ на измененный код ответа с использованием абсолютно позиционированного элемента.

В этом случае достаточно добавить overflow: auto к абсолютно позиционированному элементу .view, чтобы он могпрокрутите внутри его родителя, как показано в этом фрагменте (я добавил еще немного контента, чтобы сделать полосу прокрутки видимой):

html, body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    background: #000000;
    color: #EFEFEF;
    font-family: Segoe UI, Roboto, Helvetica;
  }

  #app {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .header-section {
    flex-shrink: 0;
  }

  .footer-secton {
    flex-shrink: 0;
 }

  .content {
    position: relative;
    flex: auto 1 1;
    background: rgba(64, 124, 214, 0.5);

  }

  .view {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
  }

<div id ="app" class="container">
    <header class="header-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </header>
    <main class="content">
      <div class="view">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
         ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
         dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
         dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
         eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet.
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
         ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
         dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
         dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
         eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet.
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
         ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
         dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
         dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
         eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet.
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
         ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
         dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
         dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
         eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet.
      </div>
    </main>
    <footer class="footer-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </footer>
  </div>

Answer 2

Нет необходимости исправлять эту проблему вручную, так как вы можете использовать последнюю загрузочную версию, и она решит ее в IE 11.

Вы можете увидеть здесь https://www.bootply.com/QIdjUoiMOq

Answer 3

IE11 имеет плохую поддержку для flexbox.Вы можете использовать это решение старой школы как запасной вариант ...

Липкий нижний колонтитул

* {padding: 0; margin: 0;}
html, body {height: 100%; background: blue;}
#header, #footer {position: fixed; width: 100%; left: 0;}
#header {top: 0; background: red;}
#footer {bottom: 0; background: green;}
#content {padding: 100px 0;}

<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>

Нелипкий нижний колонтитул

* {padding: 0; margin: 0;}
html, body {height: 100%; background: blue;}
#header, #footer {width: 100%; left: 0; z-index: 2;}
#header {position: fixed; top: 0; background: red;}
#footer {position: absolute; bottom: 0; background: green;}
#page {min-height: 100%; position: relative;}
#content {padding: 100px 0;}

<div id="header">header</div>
<div id="page">
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>

Answer 4

Установите минимальную высоту, используя jQuery на основе окна просмотра браузера.Это позволит вам разместить контент внутри окна просмотра.Это будет поддерживаться во всех браузерах независимо от содержимого.

min-height используется для идентификации содержимого занятых пространств.Если содержание больше, чем мы ожидаем, автоматически появится полоса прокрутки.В противном случае контент будет занимать область просмотра.

$(document).ready(function(){
$(window).resize(function() {
setContentHeight();

});

function setContentHeight(){
 var contentHeight = window.innerHeight - $('.footer-section').height()-19;
$('.page-wrapper').css('min-height', contentHeight+'px');
}

setContentHeight();
});

.container{
background-color:yellow;

}

.page-wrapper{
 background-color:blue;
 color:white;
}

.header-section{
background-color:green;
color:white;
}

.footer-section{
background-color:black;
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div id ="app" class="container">
    <div class="page-wrapper">
    <header class="header-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </header>
    <main class="content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut       labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
      justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
      dolor sit amet.
    </main>
    </div>
    <footer class="footer-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </footer>
  </div>

Answer 5

Вместо использования min-height: 100% я бы использовал height: 100% и overflow: visible для этого элемента оболочки.Это позволяет избежать проблемы минимальной высоты и будет расширяться (и прокручиваться) при необходимости из-за содержимого.