furao
/
test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*html,body{*/
            /*height: 100%;*/
        /*}*/
        .HolyGrail {
            display: flex;
            /*min-height: 100vh;*/
            flex-direction: column;
            height: 800px;

        }
        header,
        footer {
            background-color: #0a6aa1;
            flex: 1;


            /*height: 200px;*/
        }

        .HolyGrail-body {
            display: flex;
            flex: 5;
            /*height: 600px;*/
            background-color: #FFB5BF;

            align-items: flex-end;
            align-content: flex-start;
        }

        .HolyGrail-content {
            height: 500px;
            flex: 1;
            background-color: #0D3349;
        }

        .HolyGrail-nav, .HolyGrail-ads {
            /* 两个边栏的宽度设为12em */
            flex: 0 0 12em;
            background-color: red;
            height: 500px;
        }

        .HolyGrail-nav {
            /* 导航放到最左边 */
            order: -1;
            background-color: darkblue;

        }
    </style>
</head>
<body class="HolyGrail">
<header></header>
<div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
</div>
<footer></footer>
</body>
</html>