有時，頁面內容太少，無法占滿一屏的高度，底欄就會抬高到頁面的中間。這時可以采用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