IE11 中带有页眉、页脚和内容部分的布局答案

【问题标题】：Layout with header, footer and content section in IE11IE11 中带有页眉、页脚和内容部分的布局
【发布时间】：2019-03-14 03:55:55
【问题描述】：

我目前正在开发一个由页眉、页脚和内容部分组成的单页应用程序。内容部分应始终填充页眉和页脚之间的可用空间，如果视口太小，用户应该能够滚动整个页面。这意味着页脚不会以这种方式粘滞。

将所有三个部分放在 flexbox 中并将 flex: auto 1 1 设置为内容不会产生任何效果，因为 IE11 存在容器具有 100% 最小高度的 flex-elements 的问题。

您知道使这种布局成为可能的任何技术吗？

更新：

为了说明问题，我提供了一个 sn-p。

更新 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>

【问题讨论】：

能把总的代码贴一下吗？
我提供了一个片段来说明问题。
使用jQuery设置内容和标题最小高度以覆盖浏览器。然后它会自动转到剩余空间。

标签： html css flexbox

【解决方案1】：

IE11 有 poor support 用于 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>

【讨论】：

这也很有帮助。谢谢。但我还是更喜欢利用基于 flexbox 的布局。
不客气。 Flexbox 是现代的，但浏览器不兼容并不是真正的优势。 ;-)

【解决方案2】：

这是对答案的更改代码的响应，使用绝对定位的元素。

在这种情况下，将overflow: auto 添加到绝对定位的.view 元素就足够了，以允许它在其父元素内滚动，如此 sn-p 所示（我添加了更多内容以使滚动条可见）：

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>

【讨论】：

谢谢。然后我需要一个自定义滚动条用于此目的，但具有讽刺意味的是 IE11 无法滚动 .view 内的内容。有时这个浏览器是一个挑战。

【解决方案3】：

无需手动修复此问题，因为您可以使用最新的引导程序，它会在 IE 11 中解决。

你可以在这里看到https://www.bootply.com/QIdjUoiMOq

【讨论】：

由于某些限制，我必须避免依赖于其他布局框架。所以 boostrapt 不是我的特殊用例的选择。

【解决方案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>

【讨论】：

这也是一种选择，但我更喜欢基于 css 的解决方案，只是为了提高 UI 性能。鉴于这是一个 vue.js 应用程序，我会考虑将 DOM-API 包装在 vue.js 指令中。
这也不会是一个糟糕的方法。这是大多数 css 模板正在实现的目标。编写您自己的自定义指令并将此代码应用到您需要的地方。这将解决您的问题，并且不会为您提供糟糕的表现。自定义指令：vuejs.org/v2/guide/custom-directive.html。文章关注：codeproject.com/Articles/1199114/…

【解决方案5】：

我不会使用min-height: 100%，而是使用height: 100% 和overflow: visible 作为该包装器元素。这样可以避免最小高度问题，并且会根据内容在必要时展开（和滚动）。

【讨论】：

不幸的是，这不起作用。如果我降低浏览器窗口的高度，页脚将放置在视口底部的内容上方。
尝试将overflow: visible 和/或flex-shrink: 0 添加到内容元素
flex-shrink: 0 看起来很有希望。
如果我想扩展我的示例以提供漂亮的淡入淡出效果，我需要将position: relative; 设置为.content。在这个元素中插入一个绝对定位的子元素会破坏flex-shrink: 0; 的积极效果。你知道怎么解决吗？
我更新了我的 sn-p 并在我的初始帖子中添加了进一步的描述。如果您想了解更详细的信息，请告诉我。