Question

我目前正在开发一个包含页眉，页脚和内容部分的单页应用程序。内容部分应始终填充页眉和页脚之间的可用空间，并且如果视口太小，则用户应该可以滚动整个页面。这意味着页脚不会那样发粘。

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

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

更新：

为说明问题，我提供了一个片段。

更新2：

由于我想根据当前路径在视图（类.view）元素中淡入上一个元素，因此我必须在content元素上使用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

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

Answer 2

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>

Answer 3

使用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 4

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

您可以在这里https://www.bootply.com/QIdjUoiMOq

Answer 5

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

在这种情况下，将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>

IE11中的带有页眉，页脚和内容部分的布局

5 个答案: