网格布局下的 IE 10/11 和 Edge 页脚问题

Question

以下网格布局在最新版本的 Chrome、Firefox、Opera、IE 10/11 和 Edge 中运行良好。手头的唯一问题是，对于提到的三个微软浏览器，当内容超出屏幕大小时页脚不会开始滚动，而是固定在页面中间。换句话说，较长的内容会覆盖页脚。

在过去的几天里，我一直在做大量的研究。不幸无济于事。许多提议的解决方案通过将页脚移到包装器之外来工作，但是，我正在寻找一种适合页面给定标记的技术。

我想这很可能是一些身高问题，但由于我没有尝试的想法，我决定将这些东西列入此列表。也许你们中的一个可以给我一个火花。

感谢任何有关如何处理此问题的指针。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  height: 100%;
}

/* main grid layout start */
.wrapper {
  height: 100vh;
  display: grid;
  display: -ms-grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 45px 50px 1fr 50px;
  grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer";
  min-height: 100vh;
  -ms-grid-columns: 10% 80% 10%;
  -ms-grid-rows: 45px 50px 1fr 50px;
}

.item-header {
  background-color: pink;
  grid-area: header;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

.item-nav {
  background-color: silver;
  grid-area: navigation;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

.item-leftcol {
  background-color: skyblue;
  grid-area: column-left;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.item-centercol {
  grid-area: column-center;
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

.item-rightcol {
  background-color: tomato;
  grid-area: column-right;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.item-footer {
  background-color: green;
  text-align: center;
  padding: 10px;
  grid-area: footer;
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  display: flex;
  display: -ms-flexbox;
  /* only IE10 */
}

/* flex layout for footer start */
.fc1 {
  background-color: red;
  text-align: left;
  flex-grow: 1;
  flex-basis: 0;
  -ms-flex-positive: 1; // flex-grow
  -ms-flex-preferred-size: 0; // flex-basis
}

.fc2 {
  background-color: red;
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  -ms-flex-positive: 1; // flex-grow
  -ms-flex-preferred-size: 0; // flex-basis
}

.fc3 {
  background-color: red;
  text-align: right;
  flex-grow: 1;
  flex-basis: 0;
  -ms-flex-positive: 1; // flex-grow
  -ms-flex-preferred-size: 0; // flex-basis
}
/* flex layout for footer end */

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">nav</div>
  <div class="item-leftcol">left</div>
  <div class="item-centercol">center</div>
  <div class="item-rightcol">right</div>
  <div class="item-footer">
    <div class="fc1">footer</div>
    <!-- just added this -->
    <div class="fc2">footer</div>
    <!-- just added this -->
    <div class="fc3">footer</div>
    <!-- just added this -->
  </div>
</div>

Answer 1

终于解决了。我的情况的主要“罪魁祸首”是身高：100vh； 在 .wrapper 中。我注意到，IE10/IE11 和 Edge 的行为不同 关于这个属性。声明对于 FF、Chrome 或 Opera 来说不是问题（目前这里不能代表 Safari）。因此，我不得不采取身高：100vh； .wrapper 并根据浏览器和页面高度情况做出包含决定。

IE10/IE11情况：

当来到 IE10/IE11 时，问题是双重的：

如果高度：100vh；在 .wrapper 中声明，页面不及 查看端口显示正常。页脚保持在底部。当这个属性 但是，页脚被删除，这些类型的页面的页脚会挂在中间的某个位置。

另一方面，对于整体内容多于视口的页面，页眉在页面加载时会固定在屏幕底部，但一旦用户开始滚动，标题就会保持在那里。当高度：100vh；已从 .wrapper 中删除，对于这些页面，页脚将按应有的方式向下推。

因此，那些小于视口的页面需要高度：100vh；声明，而内容大于视口的则不需要。

IE10/IE11解决方案：

方案一：可以设置高度：100vh；对于每页内容高度小于视口高度的页面：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .wrapper {
        height: 100vh;
    }
}

这可行，但不一定是首选方式。

解决方案2： 使用Javascript确定高度并包含height:100vh；如果需要，在页面中。

这个 Javascript 处理 IE10/IE11 的情况：

function setHeightIETenEleven()
{
    var isIE10 = false;
    var isIE11 = false;

    /* IE10 ? */
    /*@cc_on
        if (/^10/.test(@_jscript_version)) {
            isIE10 = true;
        }
    @*/

    /* not IE10 maybe it's IE11 */
    if(!isIE10) {
        var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
    }

    if(isIE10 || isIE11) {
        var actualHeight = document.body.scrollHeight;
        var clientHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        if(actualHeight == clientHeight)
            insertCss(".wrapper {height: 100vh;}");
    }
}

function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) { // IE
        style.styleSheet.cssText = code;
    } else { // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );
}

window.onload = setHeightIETenEleven;

为了在此给予恰当的评价，insertCss() 函数取自： How do you add CSS with Javascript?

因为它是动态的，所以这是首选的解决方案

边缘情况：

Edge 最初与 IE10 和 IE11 存在相同的问题，但情况不同。删除 height 属性后，无论页面高度如何，一切都会立即正常运行。因此无需根据页面高度做出决定。为了让 Edge 开心，可以使用这个：

@supports (-ms-ime-align: auto) {
    .wrapper {
        height: unset;
    }
}

对于所有其他浏览器可以设置：

@supports not (-ms-high-contrast: none) {
    .wrapper {
        height: 100vh;
    }
}

比我想象的要复杂一些，但它对我有用...

Answer 2

将min-height 与 Flexbox 一起使用，IE 有一个 min-height 错误，而 CSS Grid 似乎也是如此。

由于wrapper 需要一个min-height 来填充剩余空间并在内容增长时将footer 向下推，并让IE 继续播放，所以将wrappers 设为父级，在本例中为body , 一个弹性列容器。

注意，还要删除html/body 上的height: 100% 和wrapper 上的height: 100vh。

堆栈sn-p

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {}

body {
  display: flex;
  flex-direction: column;
}


/* main grid layout start */

.wrapper {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 45px 50px 1fr 50px;
  grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer";
  min-height: 100vh;
  -ms-grid-columns: 10% 80% 10%;
  -ms-grid-rows: 45px 50px 1fr 50px;
}

.item-header {
  background-color: pink;
  grid-area: header;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

.item-nav {
  background-color: silver;
  grid-area: navigation;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

.item-leftcol {
  background-color: skyblue;
  grid-area: column-left;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.item-centercol {
  grid-area: column-center;
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

.item-rightcol {
  background-color: tomato;
  grid-area: column-right;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.item-footer {
  background-color: green;
  text-align: center;
  padding: 10px;
  grid-area: footer;
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  display: flex;
  display: -ms-flexbox;
  /* only IE10 */
}


/* flex layout for footer start */

.fc1 {
  background-color: red;
  text-align: left;
  flex-grow: 1;
  flex-basis: 0;
  -ms-flex-positive: 1; // flex-grow
  -ms-flex-preferred-size: 0; // flex-basis
}

.fc2 {
  background-color: red;
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  -ms-flex-positive: 1; // flex-grow
  -ms-flex-preferred-size: 0; // flex-basis
}

.fc3 {
  background-color: red;
  text-align: right;
  flex-grow: 1;
  flex-basis: 0;
  -ms-flex-positive: 1; // flex-grow
  -ms-flex-preferred-size: 0; // flex-basis
}


/* flex layout for footer end */

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">nav</div>
  <div class="item-leftcol">left</div>
  <div class="item-centercol">center</div>
  <div class="item-rightcol">right</div>
  <div class="item-footer">
    <div class="fc1">footer</div>
    <!-- just added this -->
    <div class="fc2">footer</div>
    <!-- just added this -->
    <div class="fc3">footer</div>
    <!-- just added this -->
  </div>
</div>

---

使用display: grid 似乎可以使用相同的技巧

堆栈sn-p

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {}

body {
  display: -ms-grid;
  -ms-grid-columns: 100%;
}


/* main grid layout start */

.wrapper {
	display: grid;
	display: -ms-grid;
	grid-template-columns: 10% 80% 10%;
	grid-template-rows: 45px 50px 1fr 50px;
	grid-template-areas:
  "header header header"
	"navigation navigation navigation"
	"column-left column-center column-right"
	"footer footer footer";

	min-height: 100vh;
	-ms-grid-columns: 10% 80% 10%;
	-ms-grid-rows: 45px 50px 1fr 50px;
}

.item-header {
	background-color: pink;
	grid-area: header;
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
}

.item-nav {
	background-color: silver;
	grid-area: navigation;
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
}

.item-leftcol {
	background-color: skyblue;
	grid-area: column-left;
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

.item-centercol {
	grid-area: column-center;
	-ms-grid-row: 3;
	-ms-grid-column: 2;
}

.item-rightcol {
	background-color: tomato;
	grid-area: column-right;
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}

.item-footer {
	background-color: green;
  text-align: center;
	padding: 10px;
	grid-area: footer;
	-ms-grid-row: 4;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
display: flex;
	display: -ms-flexbox;	/* only IE10 */

}

/* flex layout for footer start */

.fc1 {
	background-color: red;
	text-align: left;
	flex-grow: 1;
	flex-basis: 0;
	-ms-flex-positive: 1;		// flex-grow
	-ms-flex-preferred-size: 0;	// flex-basis
}

.fc2 {
	background-color: red;
	text-align: center;
	flex-grow: 1;
	flex-basis: 0;
	-ms-flex-positive: 1;		// flex-grow
	-ms-flex-preferred-size: 0;	// flex-basis
}

.fc3 {
	background-color: red;
	text-align: right;
	flex-grow: 1;
	flex-basis: 0;
	-ms-flex-positive: 1;		// flex-grow
	-ms-flex-preferred-size: 0;	// flex-basis
}


    /* flex layout for footer end */
    
    

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">nav</div>
  <div class="item-leftcol">left</div>
  <div class="item-centercol">center</div>
  <div class="item-rightcol">right</div>
  <div class="item-footer">
    <div class="fc1">footer</div>
    <!-- just added this -->
    <div class="fc2">footer</div>
    <!-- just added this -->
    <div class="fc3">footer</div>
    <!-- just added this -->
  </div>
</div>