固定的底栏（flex布局）

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .Site{width: 1300px;
        display: flex;
        min-height: 100vh; /*1vh表示浏览器高度的1%，100vh为浏览器高度*/
        flex-direction: column;/*灵活的项垂直显示*/
    }

    .content{
        flex: 1;/* 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容 */
    }

    .footer{
        height: 100px;
        background-color: black;
    }
    </style>
</head>
<body class="Site">
  <header>...</header>
  <main class="content">...</main>
  <footer class="footer"></footer>
</body>
</html>

效果图：

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »

因本文不是用Markdown格式的编辑器书写的，转换的页面可能不符合MIP标准。