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

时间：2018-02-15 01:42:17

标签： html css css3 flexbox css-grid

以下网格布局在最新版本的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>

2 个答案:

答案 0 :(得分：3)

在Flexbox中使用min-height，IE有一个 min-height 错误，CSS Grid也是如此。

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

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

Stack snippet

＆＃13;
＆＃13; 
* {
  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 */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

使用display: grid

似乎可以使用相同的技巧

Stack snippet

＆＃13;
＆＃13; 
* {
  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 */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

IE10 / IE11情况：

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

如果身高：100vh;在.wrapper中声明，页面不如.wrap 查看端口显示正常。页脚停留在底部。当这个属性 但是，这些页面会将页脚挂在中间的某个位置。

另一方面，对于总体内容比视图端口更多的页面，页面在页面加载时保持固定在屏幕底部，但是一旦用户开始滚动，它就会保留在那里。高度：100vh;从.wrapper中删除，对于这些页面，页脚按原样被按下。

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

IE10 / IE11的解决方案：

解决方案1：可以设置高度：100vh;对于内容高度小于每页视口高度的页面，使用：

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

这有效，但不一定是首选方式。

解决方案2：使用Javascript确定高度并包含高度：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相同，但情况显示不同。一旦高度属性被删除，无论页面高度如何，一切都正常工作。因此，无需根据页面高度做出决策。为了让Edge快乐，可以使用它：

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

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

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

比我想象的要复杂得多，但它对我有用......

相关问题
最新问题