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

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

Answer 2

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