有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
.Site { display: flex; min-height: 100vh; flex-direction: column; border:1px solid red; } .Site-content { flex: 1; border:1px solid red; display:-webkit-flex; display:flex; justify-content:center; align-items:center; } article{ width:600px; height:260px; border:1px solid red; }
<!doctype html> <html>
<head>
<meta charset="utf-8" />
<title>H5标准页面</title>
<link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
</head>
<body class="Site">
<header>...</header>
<main class="Site-content">
<article>
</article>
</main>
<footer>……</footer>
</body>
</html