固定的底栏(flex布局)

2018-04-05T22:25:13

有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用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标准。