Metro使用的是IE10内核, -ms-grid是弹性布局, 解决排版问题
<!DOCTYPE html>
<html style="height:100%;">
<head>
<title>Forms Controls - Part 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- WinJS references -->
<link rel="stylesheet" id="ui-dark" type="text/css" href="WinJS/css/ui-dark.css" />
<link rel="stylesheet" id="ui-light" type="text/css" href="WinJS/css/ui-light.css"
disabled="true" />
<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
<!-- Sample references -->
<link rel="stylesheet" type="text/css" href="css/formLayout.css" />
<link rel="stylesheet" type="text/css" href="css/program.css" />
<style>
body {margin:0;height:100%;}
#wrapper {
width:100%;
height:100%;
display:-ms-grid;
-ms-grid-columns:1fr;
-ms-grid-rows:200px 1fr 200px;
border:2px solid blue;
}
#header {
-ms-grid-row:1;
background:black;
}
#body {
-ms-grid-row:2;
}
#slider {
width:100%;
height:200px;
border:1px solid black;
display:-ms-grid;
-ms-grid-columns:200px 1fr 200px;
-ms-grid-rows:1fr;
-ms-grid-row:3;
}
#slider-head {
-ms-grid-column:1;
background:black;
-ms-grid-layer:2;
}
#slider-center {
-ms-grid-column:2;
background:green;
}
#slider-tail {
-ms-grid-column:3;
-ms-grid-layer:2;
background:black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="slider">
<div id="slider-head">head</div>
<div id="slider-center">center</div>
<div id="slider-tail">tail</div>
</div>
</div>
</body>
</html>
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
