Metro的Grid布局解决自适应问题

最新推荐文章于 2022-07-24 10:48:11 发布

RaylnGuan

最新推荐文章于 2022-07-24 10:48:11 发布

阅读量488

点赞数

本文链接：https://blog.csdn.net/rayln/article/details/39153209

版权

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>