Flex 页面布局在 IE11 中不起作用 - flex grow 效果不佳 [重复]答案

【问题标题】：Flex page-layout not working in IE11 - flex grow not playing nice [duplicate]Flex 页面布局在 IE11 中不起作用 - flex grow 效果不佳 [重复]
【发布时间】：2018-08-30 10:45:45
【问题描述】：

我正在尝试使用 flex 设置一个简单的页面布局，但似乎无法让它在 IE11 中工作。主要组件拒绝像在 Chrome 或 Safari 中那样增长以填充空间。我已经阅读了有关 IE 上 flex-grow 的所有信息，但无济于事。

    html, body {
    	width: 100vw;
    	min-height: 100vh;
    	margin: 0;
    	padding: 0;
    }
    body {
    	display: -ms-flexbox;
    	display: -webkit-flex;
    	display: flex;
    	-webkit-flex-direction: column;
    	flex-direction: column;
    	background: black;
    }
    header {
    	background: pink;
    	height: 100px;
    }
    main {
    	background: lightgrey;
    	-webkit-flex: 1 0 auto;
    	-ms-flex: 1 0 auto;
    	flex: 1 0 auto;
    	height: 100%;
    }
    footer {
    	background: lightblue;
    	-webkit-flex: 0 0 auto;
    	-ms-flex: 0 0 auto;
    	flex: 0 0 auto;
    	height: 100px;
    }

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<header class="navigation">
		<ul>
			<li>
				<a href="#"><span>Privacy</span></a>
			</li>
			<li>
				<a href="#"><span>Sitemap</span></a>
			</li>
			<li>
				<a href="#"><span>Newsletter</span></a>
			</li>
		</ul>
	</header>
	<main>
		The main Section
	</main>
	<footer>
		Footer
	</footer>
</body>
</html>

【问题讨论】：

标签： html css flexbox internet-explorer-11

【解决方案1】：

你需要付出，

height:100%; for html and body

需要删除

height: 100%  from main

【讨论】：

当然！！感谢您的快速回复。
@SCalk 是否在您的系统上工作...它与我的工作..
似乎在 IE11、Safari 和 Chrome 上运行起来就像一个魅力 :)