Question

我正在尝试使用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>

Answer 1

你需要给予，

height:100%; for html and body

并需要删除

height: 100%  from main

Flex页面布局在IE11中不起作用 - flex变得不好玩

1 个答案: