当先锋百科网

首页 1 2 3 4 5 6 7

使用弹性盒子（flexbox）进行页面布局

1、直接上代码

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flexbox</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .header{
            background: #008c8c;
            color: #fff;
            height: 60px;
            box-sizing: border-box;
        }

        .main{
            flex: 1;
            background: #004c4c;
            display: flex;
        }

        .footer {
            height: 60px;
            background: #008c8c;
        }

        aside {
            width: 200px;
            color: #ccc;
            box-sizing: border-box;
            background: fixed;
        }

        amain {
            flex: 1;
            color: #ccc;
            background: lightseagreen;
        }

    </style>
</head>

<body>
    <div class="container">
        <header class="header">
        </header>
        <main class="main">
            <aside>1</aside>
            <amain>2</amain>
        </main>
        <footer class="footer">

        </footer>
    </div>
</body>

</html>

2、运行结果截图