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

Question

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

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

我认为这很可能是一些高度问题，但由于我没有办法尝试，所以我决定将其列入此列表。也许你们中的一个人可以给我带来 Spark 。

任何有关如何处理此问题的指示都将受到赞赏。

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

在 Flexbox 中使用 min-height，IE 存在 min-height 错误，而且 CSS Grid 似乎也是如此。

由于wrapper需要一个min-height来填充剩余空间并在内容增长时向下插入footer，并使IE一起玩，将 wrappers 设为父级，在本例中为 body，一个 Flex 列容器。

注意，还要删除 html/body 上的 height: 100% 和 height: 100vh 包装器上的code>。

堆栈片段

* {
  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 来实现相同的技巧

堆栈片段

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