flex固定底部栏

本文转载自查看原文 2017-01-17 14:27 2385

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>

        .box { display: flex; min-height: 100vh; flex-direction: column; }
        .box-con { flex: 1; }
        header{
            height:100px;
            background:red;
        }
        footer {
            height:100px;
            background:cyan;
        }
    </style>
</head>
<body class="box">
    <header></header>
    <main class="box-con"></main>
    <footer></footer>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 MUI 固定底部导航栏布局：flex弹性布局_固定底部、居中纯CSS，用flex布局实现：内容少时页脚在屏幕底部，内容多时页脚跟随在内容下面，附带永远固定在底部的导航栏 Bootstrap 固定底部导航栏菜单 flex 布局实现固定头部和底部，中间滚动布局移动端底部导航栏固定——兼容IOS 仿淘宝使用flex布局实现页面顶部和底部的固定布局固定底部button按钮，兼容各种手机、微信等【flex布局】 FLEX实现两侧边栏固定中间自适应布局使用css3 flex，实现头部、左侧栏固定，内容区域滚动显示